:root {
    --scrollbar-size: 12px;
    --scrollbar-radius: 999px;
    --scrollbar-track: transparent;
    --scrollbar-thumb-idle: rgba(125, 211, 252, 0);
    --scrollbar-thumb-active: rgba(125, 211, 252, 0.68);
    --scrollbar-thumb-hover: rgba(186, 230, 253, 0.9);
}

html {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

* {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

*:hover {
    scrollbar-color: var(--scrollbar-thumb-active) var(--scrollbar-track);
}

html.is-scrollbar-active,
html.is-scrollbar-active * {
    scrollbar-color: var(--scrollbar-thumb-active) var(--scrollbar-track);
}

*::-webkit-scrollbar {
    width: var(--scrollbar-size);
    height: var(--scrollbar-size);
}

*::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}

*::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb-idle);
    border: 3px solid transparent;
    background-clip: padding-box;
    border-radius: var(--scrollbar-radius);
    transition: background-color 180ms ease;
}

*:hover::-webkit-scrollbar-thumb,
html.is-scrollbar-active *::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb-active);
}

*::-webkit-scrollbar-thumb:hover,
*::-webkit-scrollbar-thumb:active {
    background-color: var(--scrollbar-thumb-hover);
}