@charset "utf-8";

$changelog-tag-width: 102px;
$changelog-no-category-tag-width: 2rem;

.changelog {
    // Fix margin of p element inside of list element
    // Example of markdown related to that
    // - [Fable Gitter](https://gitter.im/fable-compiler/Fable)

    //     Fable specific discussion and networking channel <-- This line

    // - [Slack](https://fsharp.org/guides/slack/)
    .content {
        ol,
        li {
            p:not(:last-child) {
                margin-bottom: 0;
            }
        }
    }

    ul.changelog-list {
        list-style-type: none;
        padding: 0;

        li.changelog-list-item {
            padding: 0.5rem 0;
            position: relative;

            &::before {
                border-left: 1px solid rgba(122, 122, 122, 0.25);
                content: " ";
                height: calc(100%);
                left: $changelog-tag-width * 0.5;
                position: absolute;
                top: 0px;
                z-index: -1;
            }

            &.is-version {
                padding-top: 2rem;
                padding-bottom: 0.5rem;
                margin: 2rem 0 0 0;

                .tag {
                    min-width: $changelog-tag-width;
                    width: unset;
                }

                &:not(:first-child) {
                    border-top: 1px solid rgba(122, 122, 122, 0.25);
                }

                .release-date {
                    display: inline-flex;
                    align-items: center;
                    margin-left: 1rem;
                }

                .anchor {
                    @include desktop {
                        padding-top: calc(#{$computed-navbar-height + 2rem});
                    }

                    @include touch {
                        padding-top: calc(#{$computed-navbar-height + $navbar-height + 2rem});
                    }
                }
            }

            .changelog-list-item-category {
                margin: 0.5rem 1.25em 0.5rem 0;
                width: $changelog-tag-width;
            }

            .changelog-details {
                width: 100%;
                margin-left: calc(#{$changelog-tag-width} + 1rem);
            }
        }

        li.changelog-version-body {
            margin-left: calc(#{$changelog-tag-width} + 1rem);
            // background-color: red;

            &::before {
                left: calc((#{$changelog-tag-width * 0.5} + 1rem) * -1);
            }

            ul {
                list-style-type: none;
                padding: 0;
                width: 100%;

                > li {
                    position: relative;
                    padding: 0.5rem 0;

                    // Reset margin for nested list
                    ul {
                        li {
                            margin-left: unset;
                        }
                    }

                    &::before {
                        content: "\f054";
                        font-family: "Font Awesome 5 Free";
                        font-weight: 900;
                        display: block;
                        position: absolute;
                        left: -2rem;
                    }
                }
            }
        }
    }
}