:root {
    --panda-scroll-thumb: rgba(75, 98, 132, 0.42);
    --panda-scroll-thumb-hover: rgba(37, 99, 235, 0.68);
    --panda-scroll-thumb-active: rgba(29, 78, 216, 0.82);
}

html[data-panda-ui="dark"] {
    --panda-scroll-thumb: rgba(119, 151, 190, 0.46);
    --panda-scroll-thumb-hover: rgba(96, 165, 250, 0.72);
    --panda-scroll-thumb-active: rgba(59, 130, 246, 0.88);
}

html[data-panda-ui="anime"] {
    --panda-scroll-thumb: rgba(190, 82, 135, 0.38);
    --panda-scroll-thumb-hover: rgba(219, 39, 119, 0.64);
    --panda-scroll-thumb-active: rgba(190, 24, 93, 0.8);
}

@supports not selector(::-webkit-scrollbar) {
    html,
    body,
    * {
        scrollbar-width: thin;
        scrollbar-color: var(--panda-scroll-thumb) transparent;
    }
}

::-webkit-scrollbar {
    width: 11px;
    height: 11px;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    min-height: 44px;
    border: 3px solid transparent;
    border-radius: 999px;
    background: var(--panda-scroll-thumb);
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    border-width: 2px;
    background-color: var(--panda-scroll-thumb-hover);
}

::-webkit-scrollbar-thumb:active {
    border-width: 2px;
    background-color: var(--panda-scroll-thumb-active);
}

::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}

@media (pointer: coarse) {
    ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    ::-webkit-scrollbar-thumb {
        border-width: 2px;
    }
}