html.has-floating-scrollbar {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

html.has-floating-scrollbar::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.floating-scrollbar {
    position: fixed;
    z-index: 12000;
    top: 7px;
    right: 3px;
    bottom: 7px;
    width: 8px;
    opacity: .34;
    pointer-events: none;
    transition: opacity .18s ease;
}

.floating-scrollbar[hidden] {
    display: none;
}

.floating-scrollbar.is-active,
.floating-scrollbar:hover,
.floating-scrollbar:focus-within {
    opacity: .82;
}

.floating-scrollbar-thumb {
    position: absolute;
    top: 0;
    right: 0;
    width: 5px;
    min-height: 42px;
    border: 0;
    border-radius: 999px;
    background: rgba(113, 145, 196, .58);
    box-shadow: 0 1px 5px rgba(0, 0, 0, .2);
    cursor: grab;
    pointer-events: auto;
    touch-action: none;
    transition: width .16s ease, background .16s ease, box-shadow .16s ease;
}

.floating-scrollbar-thumb:hover,
.floating-scrollbar-thumb:focus-visible,
.floating-scrollbar-thumb.is-dragging {
    width: 7px;
    outline: none;
    background: rgba(22, 113, 255, .82);
    box-shadow: 0 2px 8px rgba(7, 95, 255, .32);
}

.floating-scrollbar-thumb.is-dragging {
    cursor: grabbing;
}

html[data-theme="light"] .floating-scrollbar-thumb {
    background: rgba(68, 91, 128, .46);
}

html[data-theme="light"] .floating-scrollbar-thumb:hover,
html[data-theme="light"] .floating-scrollbar-thumb:focus-visible,
html[data-theme="light"] .floating-scrollbar-thumb.is-dragging {
    background: rgba(7, 95, 255, .76);
}

@media (max-width: 760px) {
    .floating-scrollbar {
        right: 2px;
        width: 6px;
    }

    .floating-scrollbar-thumb {
        width: 4px;
        min-height: 34px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .floating-scrollbar,
    .floating-scrollbar-thumb {
        transition: none;
    }
}