/* scrool */
html, body {
    scrollbar-color: var(--main-color) #fff; /* «цвет ползунка» «цвет полосы скроллбара» */
    scrollbar-width: thin;  /* толщина */
}

/* полоса прокрутки (скроллбар) */
::-webkit-scrollbar {
    width: 10px; /* ширина для вертикального скролла */
    background-color: #fff;
}

/* ползунок скроллбара */
::-webkit-scrollbar-thumb {
    background-color: var(--main-color);
    height: 6px;
}

/* Стрелки */
::-webkit-scrollbar-button:vertical:start:decrement {
    display: none;
    background: linear-gradient(120deg, var(--main-color) 40%, rgba(0, 0, 0, 0) 41%),
        linear-gradient(240deg, var(--main-color) 40%, rgba(0, 0, 0, 0) 41%),
        linear-gradient(0deg, var(--main-color) 30%, rgba(0, 0, 0, 0) 31%);
    background-color: #f6f8f4;
}

::-webkit-scrollbar-button:vertical:end:increment {
    display: none;
    background:
        linear-gradient(300deg, var(--main-color) 40%, rgba(0, 0, 0, 0) 41%),
        linear-gradient(60deg, var(--main-color) 40%, rgba(0, 0, 0, 0) 41%),
        linear-gradient(180deg, var(--main-color) 30%, rgba(0, 0, 0, 0) 31%);
    background-color: #fff;
}

::-webkit-scrollbar-button:horizontal:start:decrement {
    display: none;
    background:
        linear-gradient(30deg, var(--main-color) 40%, rgba(0, 0, 0, 0) 41%),
        linear-gradient(150deg, var(--main-color) 40%, rgba(0, 0, 0, 0) 41%),
        linear-gradient(270deg, var(--main-color) 30%, rgba(0, 0, 0, 0) 31%);
    background-color: #fff;
}

::-webkit-scrollbar-button:horizontal:end:increment {
    display: none;
    background:
        linear-gradient(210deg, var(--main-color) 40%, rgba(0, 0, 0, 0) 41%),
        linear-gradient(330deg, var(--main-color) 40%, rgba(0, 0, 0, 0) 41%),
        linear-gradient(90deg, var(--main-color) 30%, rgba(0, 0, 0, 0) 31%);
    background-color: #fff;
}