@import 'variables';

.sidebar {
    padding-bottom: $spacer;
    padding-right: $spacer / 2;
    position: sticky;
    top: 0;
    max-height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;

    &::-webkit-scrollbar,
    &::-moz-scrollbar {
        display: none;
    }

    &::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    &::-webkit-scrollbar-thumb {
        background: $brand-grey-lighter;
    }

    &::-webkit-scrollbar-track {
        background: darken($brand-white, 3%);
    }
}

.groupTitle {
    font-size: $font-size-small;
    font-family: $font-family-button;
    text-transform: uppercase;
    margin-top: $spacer;
    margin-bottom: $spacer / 4;
}

.groupTitleLink {
    color: $brand-grey-light;

    &:hover,
    &:focus {
        transform: none;
        color: $brand-grey-light;
    }
}

.list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-left: 1px solid $brand-grey-lighter;
    margin-left: $spacer / 2;

    > ul {
        padding-left: 0;
    }

    li {
        display: block;

        &:before {
            display: none;
        }
    }
}

.link,
.toc a {
    color: $brand-grey;
    display: inline-block;
    padding: $spacer / 6 $spacer / 2;
    border-left: .1rem solid transparent;
    margin-left: -.05rem;

    &:hover,
    &:focus {
        transform: none;
        color: $brand-purple;

        :global(.setup) & {
            color: $brand-blue;
        }

        :global(.tutorials) & {
            color: $orange;
        }

        :global(.references) & {
            color: $green;
        }
    }
}

.toc {
    ul {
        padding-left: 0;
        margin: 0;

        ul {
            border-left: 1px solid $brand-grey-lighter;
            margin-left: $spacer;
            font-size: $font-size-small;
        }
    }

    li {
        margin: 0;
    }

    a {
        padding-top: $spacer / 12;
        padding-bottom: $spacer / 12;
    }

    code {
        background: none;
        color: inherit;
    }

    [data-deprecated='true'] code {
        opacity: .5;
    }
}

.active {
    composes: link;
    color: $brand-purple;
    border-left-color: $brand-purple;

    :global(.setup) & {
        color: $brand-blue;
        border-left-color: $brand-blue;
    }

    :global(.tutorials) & {
        color: $orange;
        border-left-color: $orange;
    }

    :global(.references) & {
        color: $green;
        border-left-color: $green;
    }
}

.scrollspyActive {
    > a {
        color: $green;
        border-left-color: $green;
    }
}

.external {
    fill: $brand-grey-light;
    display: inline-block;
    width: $font-size-mini;
    height: $font-size-mini;
}
