html {
    --scrollbar-color-track: #E0EDFF; /*--color1*/
    --scrollbar-color-thumb: #3975DB; /*--color3*/
}

html:has(body.style-red-light) {
    --scrollbar-color-track: #F0EEEF;
    --scrollbar-color-thumb: #AB0A3A;
}

html:has(body.style-red-dark) {
    --scrollbar-color-track: #F0EEEF;
    --scrollbar-color-thumb: #AB0A3A;
}

html:has(body.style-green-light) {
    --scrollbar-color-track: #E9F3EE;
    --scrollbar-color-thumb: #197163;
}

html:has(body.style-green-dark) {
    --scrollbar-color-track: #E9F3EE;
    --scrollbar-color-thumb: #3A6461;
}

html:has(body.style-blue-light) {
    --scrollbar-color-track: #E8F2FF;
    --scrollbar-color-thumb: #466391;
}

html:has(body.style-blue-dark) {
    --scrollbar-color-track: #E8F2FF;
    --scrollbar-color-thumb: #664832;
}

html:has(body.style-gold-light) {
    --scrollbar-color-track: #F2EEE1;
    --scrollbar-color-thumb: #967102;
}

html:has(body.style-gold-dark) {
    --scrollbar-color-track: #F2EEE1;
    --scrollbar-color-thumb: #AA975D;
}

html:has(body.style-black-light) {
    --scrollbar-color-track: #EAEFF2;
    --scrollbar-color-thumb: #3E4347;
}

html:has(body.style-black-dark) {
    --scrollbar-color-track: #EAEFF2;
    --scrollbar-color-thumb: #8B9EB1;
}

/* 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: 77vh;
        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;

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

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