/* Star-style overlay scrollbar, see js/retro-scrollbar.js */

.rsb-native-hidden {
    scrollbar-width: none;
}

.rsb-native-hidden::-webkit-scrollbar {
    display: none;
}

/* hit area: wider than the visible rail so the 6px rail is easy to grab */
.rsb {
    position: absolute;
    top: 6px;
    bottom: 6px;
    right: 1px;
    width: 14px;
    z-index: 5;
}

.rsb-fixed {
    position: fixed;
}

.rsb[hidden] {
    display: none;
}

/* dithered 1px checker track in a sunken hairline groove */
.rsb-rail {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 3px;
    width: 6px;
    border-radius: 2px;
    background: repeating-conic-gradient(oklch(100% 0 0 / 0.13) 0 25%, transparent 0 50%) 0 0 / 2px 2px;
    box-shadow: inset 0 0 0 1px oklch(0% 0 0 / 0.35);
    opacity: 0.55;
    transition: width .15s cubic-bezier(0.2, 0, 0, 1), opacity .3s cubic-bezier(0.2, 0, 0, 1);
}

.rsb:hover .rsb-rail,
.rsb-drag .rsb-rail {
    width: 10px;
    opacity: 1;
}

.rsb-active .rsb-rail {
    opacity: 1;
}

.rsb-thumb {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    min-height: 24px;
    box-sizing: border-box;
    border-radius: 2px;
    background: oklch(74% 0.01 265);
    box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.4), 0 0 0 1px oklch(0% 0 0 / 0.55);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    touch-action: none;
}

.rsb:hover .rsb-thumb {
    background: oklch(84% 0.012 265);
}

.rsb-drag .rsb-thumb {
    background: oklch(83% 0.05 245);
    box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.5), 0 0 0 1px oklch(0% 0 0 / 0.55),
                0 0 6px oklch(83% 0.06 245 / 0.7);
}

/* grip ticks */
.rsb-thumb i {
    display: block;
    width: 4px;
    height: 1px;
    background: oklch(32% 0.01 265);
}

.rsb-drag .rsb-thumb i {
    background: oklch(30% 0.04 245);
}

@media (prefers-reduced-motion: reduce) {
    .rsb-rail {
        transition: none;
    }
}