html {
    --scrollbar-color-track: #F8F5F3; /*--page-bg*/
    --scrollbar-color-thumb: #A33D25; /*--accent*/
}

html:has(body.style-izhevsk) {
    --scrollbar-color-track: #F5F4F5;
    --scrollbar-color-thumb: #A33D25;
}

html:has(body.style-novodev) {
    --scrollbar-color-track: #F8F5F2;
    --scrollbar-color-thumb: #5B0C0F;
}

html:has(body.style-red) {
    --scrollbar-color-track: #F8F5F3;
    --scrollbar-color-thumb: #A33D25;
}

html:has(body.style-gold) {
    --scrollbar-color-track: #F8F4E8;
    --scrollbar-color-thumb: #9F8843;
}

html:has(body.style-blue) {
    --scrollbar-color-track: #E6EEF3;
    --scrollbar-color-thumb: #3F81B1;
}

html:has(body.style-green) {
    --scrollbar-color-track: #EFF4F2;
    --scrollbar-color-thumb: #66A289;
}

/* Modern browsers */
@supports (scrollbar-width: auto) {
    * {
        scrollbar-color: var(--scrollbar-color-thumb) var(--scrollbar-color-track);
        scrollbar-width: thin;
    }
}

/* Legacy browsers */
@supports selector(::-webkit-scrollbar) {
    ::-webkit-scrollbar-thumb {
        background: var(--scrollbar-color-thumb);
        border-radius: 4px;
    }
    ::-webkit-scrollbar-track {
        background: var(--scrollbar-color-track);
    }
    ::-webkit-scrollbar {
        max-width: 4px;
        max-height: 4px;
    }
}

@media only screen and (min-width: 1300px) {

    @supports (scrollbar-width: auto) {
        .menu ul {
            scrollbar-width: none;
        }
    }

    @supports selector(::-webkit-scrollbar) {
        .menu ul::-webkit-scrollbar-thumb {
            background: transparent;
        }
        .menu ul::-webkit-scrollbar-track {
            background: transparent;
        }
    }

    .menu ul li {
        position: relative;
    }
    .menu ul li ul {
        max-height: 85vh;
        overflow-y: auto;
        overflow-x: hidden;
        display: flex;
        flex-direction: column;
        padding-bottom: 0; /*убираем стандартный отступ и заменяем блоком с затенением, который ни на что не наезжает при коротком меню*/
    }

    .menu ul li ul::after {
        content: "";
        display: block;
        position: sticky;
        bottom: 0;
        flex-shrink: 0;

        /* Сдвигаем его так, чтобы он перекрывал текст только при скролле */
        margin-top: -15px;
        height: 30px;

        pointer-events: none;
        background: linear-gradient(transparent, var(--white));
    }

    /* Стрелки-подсказки о прокрутке вместо полосы: сверху — если есть что прокручивать вверх, снизу — вниз.
       Где поддерживаются scroll-driven animations, видимость стрелок считает CSS,
       иначе (Firefox) main.js ставит классы can-scroll-up / can-scroll-down */
    .menu ul li ul {
        --arrow-arm-down: linear-gradient(to top right, transparent calc(50% - 0.8px), var(--scrollbar-color-thumb) calc(50% - 0.8px) calc(50% + 0.8px), transparent calc(50% + 0.8px));
        --arrow-arm-up: linear-gradient(to bottom right, transparent calc(50% - 0.8px), var(--scrollbar-color-thumb) calc(50% - 0.8px) calc(50% + 0.8px), transparent calc(50% + 0.8px));
    }

    .menu ul li ul::before {
        content: "";
        display: block;
        position: sticky;
        top: 0;
        z-index: 1;
        flex-shrink: 0;
        margin-bottom: -30px;
        height: 30px;
        pointer-events: none;
        background:
            var(--arrow-arm-up) calc(50% - 7px) 9px / 7px 7px no-repeat,
            var(--arrow-arm-down) 50% 9px / 7px 7px no-repeat,
            linear-gradient(var(--white), transparent);
        opacity: 0;
    }

    .menu ul li ul::after {
        z-index: 1;
        background:
            var(--arrow-arm-down) calc(50% - 7px) 14px / 7px 7px no-repeat,
            var(--arrow-arm-up) 50% 14px / 7px 7px no-repeat,
            linear-gradient(transparent, var(--white));
        opacity: 0;
    }

    @supports (animation-timeline: scroll()) {
        .menu ul li ul::before {
            animation: menu-scroll-arrow-show linear both;
            animation-timeline: scroll(nearest block);
            animation-range: 0 30px;
        }

        .menu ul li ul::after {
            animation: menu-scroll-arrow-hide linear both;
            animation-timeline: scroll(nearest block);
            animation-range: calc(100% - 30px) 100%;
        }

        @keyframes menu-scroll-arrow-show {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        @keyframes menu-scroll-arrow-hide {
            from { opacity: 1; }
            to { opacity: 0; }
        }
    }

    @supports not (animation-timeline: scroll()) {
        .menu ul li ul.can-scroll-up::before,
        .menu ul li ul.can-scroll-down::after {
            opacity: 1;
        }
    }

    /* Подменю 3-го уровня выводим через position: fixed (координаты задаются в main.js),
       иначе его обрезает прокручиваемый список 2-го уровня.
       У предков fixed-элемента не должно быть transform, поэтому анимация появления списка 2-го уровня — через margin-top */
    .menu ul.level2 {
        transform: none;
        margin-top: 8px;
        transition-property: margin-top, opacity;
    }
    .menu li:hover > ul.level2,
    .menu li.open > ul.level2 {
        transform: none;
        margin-top: 0;
    }
    .menu ul.level3 {
        position: fixed;
        top: 0;
        left: 0;
    }
}