html {
    scroll-behavior: smooth;
}

.li-widgets--toc {
    border-left: 1px solid var(--color-alpha--black_alpha_15);

    > p {
        color: var(--color-brand--kind_blue_raw);
        font-weight: var(--font-weight--semibold);
        letter-spacing: var(--letter-spacing-positive--1);
        padding: 24px 24px 24px 31px;
        font-size: var(--font-size--body-l);
    }

    > ul {
        list-style: none;
        padding: 0;

        > li {
            padding: 6px 0 6px 24px;
            border-left: 8px solid transparent;

            &.active {
                border-left: 8px solid var(--color-brand--kind_blue_medium) !important;
            }

            > a {
                font-weight: var(--font-weight--regular);
                color: var(--color-alpha--black_alpha_80);
                font-size: var(--font-size--body-s);

                &.active {
                    font-weight: var(--font-weight--medium) !important;
                    color: var(--color-brand--kind_blue_raw);
                }

                &:hover {
                    color: var(--color-brand--kind_blue_medium);
                    transition: color 0.5s;
                }
            }
        }
    }
}

@media (max-width: 1024px) {

    .li-widgets--toc {
        position: relative;
        box-shadow: var(--shadow-xl);
        border-left: none;

        > p {
            display: none;
        }

        > ul {
            display: none;
            margin: 0;
            padding: 0;
            background: #fff;
            border-top: none;

            > li {
                padding: 12px 24px;
                border-left: 8px solid transparent;
            }
        }

        .toc-toggle {
            position: relative;
            width: 100%;
            padding: 16px 32px;
            border-bottom: 1px solid var(--color-alpha--black_alpha_15) !important;
            border-top: none;
            border-left: none;
            border-right: none;
            background: var(--color-neutral-white--neutral_bright_white);
            cursor: pointer;
            font-size: var(--font-size--body-m);
            font-weight: var(--font-weight--semibold);
            color: var(--color-brand--kind_blue_raw);
            text-align: left;
            white-space: wrap;
            border-radius: 0;

            &:focus {
                border-bottom: none !important;
            }

            &::after {
                content: "";
                position: absolute;
                right: 12px;
                top: 50%;
                width: 24px;
                height: 24px;
                transform: translateY(-50%);
                background-image: url('../../../../assets/img/icons/chevron/chevron-down.svg');
                background-size: contain;
                background-repeat: no-repeat;
                transition: transform 0.3s ease;
            }
        }

        /*.toc-toggle:hover, .toc-toggle:focus {*/
        /*    background: var(--color-neutral-white--neutral_bright_white);*/
        /*    font-size: var(--font-size--body-m);*/
        /*    font-weight: var(--font-weight--semibold);*/
        /*    color: var(--color-brand--kind_blue_raw);*/
        /*}*/
    }

    .li-widgets--toc.open {

        .toc-toggle {
            border-bottom: none !important;

            &::after {
                transform: translateY(-50%) rotate(180deg);
            }
        }

        > ul {
            display: block;
            border-left: 1px solid var(--color-alpha--black_alpha_15);
        }
    }
}

@media (min-width: 1024px) {
    .toc-toggle {
        display: none;
    }
}


/*#toc-responsive {*/
/*    padding: 16px 24px;*/
/*    !*box-shadow: 0 20px 24px -4px rgba(10, 13, 18, 0.08), 0 8px 8px -4px rgba(10, 13, 18, 0.03);*!*/
/*    font-size: var(--font-size--body-m);*/
/*    font-weight: var(--font-weight--semibold);*/
/*    border: none;*/
/*}*/

/*#toc-responsive:focus-visible {*/
/*    outline: none;*/
/*}*/