

aside {
    display: block;

    nav {
        position: sticky;
        top: 30px;
    }

    header {
        @include user-select-none;

        color: $gray-700;
        font-weight: 400;
        margin-bottom: $m-2;
        margin-top: $m-2;
        font-size: $text-sm;
        text-transform: uppercase;
        letter-spacing: 0.75px;
        font-weight: 500;
        font-family: Kanit;
      }
}

aside #TableOfContents {
    a, a:visited {
        display: block;
        padding: $p-1 $p-0;
        font-size: $text-sm;
        color: $gray-600;
        line-height: $leading-snug;
        text-decoration: none;
    }

    a:hover {
        color: $gray-900;
    }

    ul ul {
        padding-left: $p-3;
    }
}

// the table-of-contents section is only visible on
// desktop screens and larger.
@media (max-width: 1200px) {
    aside {
        display: none;
    }
}

// adjust the aside for the specification view, which
// holds the specification table of contents and requires
// slightly different styling.

.spec {
    aside code {
        border-radius: 4px;
        background: #edf2f7;
        padding: 0px $p-1;
        font-family: $font-mono;
    }
    aside nav {
        position: unset;
        top: unset;
    }
    #TableOfContents ul {
        counter-reset: item;
        padding-left: 0px !important;
    }
    #TableOfContents > ul > li {
        counter-increment: item;
        margin-bottom: 30px;
    }
    #TableOfContents > ul > li > a:before {
        content: counters(item, ".") " ";
        display: inline-block;
        width: 40px;
        font-weight: 600;
        color: #4a5568;
    }
    #TableOfContents > ul > li > ul > li {
        counter-increment: item;
    }
    #TableOfContents > ul > li > ul > li > a:before {
        content: counters(item, ".") " ";
        display: inline-block;
        width: 40px;
    }
}

