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