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

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

    @supports (position: sticky) {
        position: sticky;
        top: 4rem;
    }

    div {
        @supports (position: sticky) {
            max-height: calc(100vh - 6rem);
            overflow-y: auto;
        }

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

            display: block !important;
        }

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

            li {
                font-size: .9rem;
                padding: .25em .25em .25em .5em;
                border-left: 1px solid $dividerBarColor;
                position: relative;
                margin-bottom: 0;
                margin-top: 0;

                a {
                    font-weight: $tocLinkWeight;
                }

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

                    &::before {
                        content: "";
                        position: absolute;
                        top: 0;
                        left: -3px;
                        height: 100%;
                        min-height: 16px;
                        border-left: 4px solid #566ca5;
                    }
                }
            }

            ol {
                padding-left: 1em;

                li {
                    border-left: 0;

                    a.active {
                        &::before {
                            left: -29px;
                        }
                    }
                }

                ol {
                    li {
                        a.active {
                            &::before {
                                left: -56px;
                            }
                        }
                    }

                    ol {
                        li {
                            a.active {
                                &::before {
                                    left: -83px;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

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

    @media print {
        display: none;
    }

    @media (max-width: $bp-xl) {
        display: block;
    }

    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;
    }
}