.toc {
    order: 0;
    padding-top: .1rem;

    @media (min-width: $bp-md) {
        padding-top: 1rem;
    }

    @supports (position: sticky) {
        position: sticky;
        top: $headerHeight;
    }

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

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

        @media (min-width: $bp-md) {
            @supports (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;
            }
        }

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

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

.toc-inlined {
    display: block;
    margin-bottom: 2rem;

    @media print {
        display: none;
    }

    @media (min-width: $bp-xl) {
        display: none;
    }

    div {
        border-left: 0;

        li {
            font-size: 1rem;
        }

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

            ol {
                padding-left: 1em;
            }

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

.toc-forced {
    @media screen {
        display: block;
    }
}
