:root {
    --casul-scrollbar-size: 8px;
    --casul-scrollbar-track: rgba(255, 255, 255, 0.04);
}

html {
    scrollbar-width: thin;
    scrollbar-color: var(--casul-scrollbar-thumb) var(--casul-scrollbar-track);
}

.casul-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: var(--casul-scrollbar-thumb) var(--casul-scrollbar-track);
}

html::-webkit-scrollbar,
.casul-scrollbar::-webkit-scrollbar {
    width: var(--casul-scrollbar-size);
    height: var(--casul-scrollbar-size);
}

html::-webkit-scrollbar-track,
.casul-scrollbar::-webkit-scrollbar-track {
    background: var(--casul-scrollbar-track);
    border-radius: 999px;
}

html::-webkit-scrollbar-thumb,
.casul-scrollbar::-webkit-scrollbar-thumb {
    background-color: var(--casul-scrollbar-thumb);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

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

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

html::-webkit-scrollbar-corner,
.casul-scrollbar::-webkit-scrollbar-corner {
    background: transparent;
}