:root {
    --rw-scrollbar-size: 6px;
    --rw-scrollbar-size-hover: 10px;
    --rw-scrollbar-thumb: rgba(100, 116, 139, 0.24);
    --rw-scrollbar-thumb-hover: rgba(100, 116, 139, 0.42);
    --rw-scrollbar-track: rgba(15, 23, 42, 0.04);
}

.dark {
    --rw-scrollbar-thumb: rgba(148, 163, 184, 0.28);
    --rw-scrollbar-thumb-hover: rgba(148, 163, 184, 0.48);
    --rw-scrollbar-track: rgba(148, 163, 184, 0.06);
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--rw-scrollbar-thumb) transparent;
}

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

@supports selector(::-webkit-scrollbar) {
    *::-webkit-scrollbar {
        width: var(--rw-scrollbar-size);
        height: var(--rw-scrollbar-size);
    }

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

    *::-webkit-scrollbar-track {
        background: var(--rw-scrollbar-track);
        border-radius: 999px;
    }

    *::-webkit-scrollbar-thumb {
        background-color: var(--rw-scrollbar-thumb);
        border-radius: 999px;
        border: 2px solid transparent;
        background-clip: padding-box;
        min-height: 28px;
    }

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

    *::-webkit-scrollbar-corner {
        background: transparent;
    }
}

/* Card entrance animation */
@keyframes rw-card-enter {
    0%   { opacity: 0; transform: translateY(8px); background-color: var(--rw-flash-bg); color: var(--rw-flash-text); }
    40%  { opacity: 1; transform: translateY(0); }
    100% { opacity: 1; transform: translateY(0); background-color: transparent; color: inherit; }
}
.rw-card-entering {
    animation: rw-card-enter 700ms ease both;
}

/* Card FLIP move animation */
@keyframes rw-card-flip {
    from { transform: var(--rw-flip-from); }
    to   { transform: translate(0, 0); }
}
.rw-card-moving {
    animation: rw-card-flip 300ms ease both;
}

@media (hover: none) {
    @supports selector(::-webkit-scrollbar) {
        *:hover::-webkit-scrollbar {
            width: var(--rw-scrollbar-size);
            height: var(--rw-scrollbar-size);
        }
    }
}