:root {
    --scrollbar-size: 5px;
    --scrollbar-thumb: color-mix(in srgb, var(--text-3) 28%, transparent);
    --scrollbar-thumb-hover: color-mix(in srgb, var(--text-3) 45%, transparent);
}

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

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

::-webkit-scrollbar-thumb {
    border-radius: var(--radius-full);
    background: transparent;
}

:hover::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
}

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

@supports not selector(::-webkit-scrollbar) {
    * {
        scrollbar-width: thin;
        scrollbar-color: transparent transparent;
    }

    :hover {
        scrollbar-color: var(--scrollbar-thumb) transparent;
    }
}