.toc {
    order: 0;

    @supports ((position:-webkit-sticky) or (position:sticky)) {
        position: -webkit-sticky;
        position: sticky;
        top: $headerHeight;
        z-index: 1000;
    }

    .directory {
        padding-left: .5em;
        border-left: 1px solid $dividerBarColor;

        @supports ((position:-webkit-sticky) or (position:sticky)) {
            max-height: calc(100vh - 9rem);
        }

        @media (min-width: $bp-xl) {
            max-width: 25em;
        }

        @media (min-width: $bp-md) {
            @supports ((position:-webkit-sticky) or (position:sticky)) {
                max-height: calc(100vh - 9rem);
                overflow-y: auto;
            }

            display: block !important;
        }

        li {
            font-size: .9rem;

            a {
                font-weight: $tocLinkWeight;
            }

            a.current {
                color: $linkActiveColor;
                font-weight: bold;
            }
        }

        ul {
            list-style-type: none !important;
            padding-left: 0;
            padding-bottom: 0;
            margin: 0;

            ul {
                padding-left: 1em;
            }
        }
    }
}

.toc-inlined {
    .directory {
        border-left: 0;

        li {
            font-size: 1rem;
        }

        ul {
            list-style-type: none !important;
            padding-left: 0;
            padding-bottom: 0;
            margin: 0;

            ul {
                padding-left: 1em;
            }

            a {
                font-weight: $tocLinkWeight;
            }
        }
    }
}
