#toc {
    ul {
        margin-block-start: 0;
        margin-block-end: 0;
        padding-inline-start: 1rem;

        overflow: hidden;
        position: relative;
        li {
            list-style: none;

            & > a {
                color: var(--secondary-text-color);
                text-decoration: none;
                transition: color .3s;
                display: inline-flex;
                align-items: center;
                gap: .5rem;
                &::before {
                    content: '';
                    display: inline-block;
                    width: 1rem;
                    height: .3rem;
                    background-color: var(--block-background-color);
                    border-radius: .2rem;
                    transition: background .3s;
                }
            }

            /* nested list */
            ul {
                max-height: 25rem;
                overflow-y: auto
            }

            /* active styles */
            &:not(.active) ul {
                max-height: 0
            }
            a:hover,
            &.active > a {
                color: var(--text-color);
            }

            &.active > a::before {
                background-color: var(--secondary-text-color);
            }
        }
    }
}