/* OverlayScrollbar (control/overlay_scrollbar.js) ------------------------------------------------
   A custom scrollbar that floats OVER a scroll container (native bar hidden, so content keeps its
   full width and nothing is pushed left) and slides in from the right while scrolling / hovering.
   Works with mouse drag and touch (pointer events). */

.dd-oscroll-wrap {
    position: relative;
}

/* Native bar hidden on the scroll host — content now uses the full width. */
.dd-oscroll-host {
    scrollbar-width: none; /* Firefox */
}

.dd-oscroll-host::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none; /* WebKit / Blink */
}

.dd-oscroll-bar {
    position: absolute;
    top: 4px;
    right: 0;
    bottom: 4px;
    width: 12px;
    z-index: 6;
    pointer-events: none; /* empty track lets clicks through; the thumb re-enables below */
    opacity: 0;
    transform: translateX(8px); /* parked off to the right */
    transition: opacity 0.2s ease, transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
}

/* Fixed mode (e.g. page content, sidebar): positioned over the scroller via inline top/height/right. */
.dd-oscroll-bar.dd-oscroll-fixed {
    position: fixed;
    bottom: auto; /* height is set inline instead */
    /* Above page content, sticky headers, and the sidebar (z-index:1035); below modals/toasts. */
    z-index: 1036;
}

.dd-oscroll-bar.dd-oscroll-visible {
    opacity: 1;
    transform: translateX(0); /* slides in from the right */
}

.dd-oscroll-bar.dd-oscroll-empty {
    display: none; /* nothing to scroll */
}

.dd-oscroll-thumb {
    position: absolute;
    top: 0;
    right: 2px;
    width: 6px;
    border-radius: 999px;
    background: rgba(100, 116, 139, 0.55);
    pointer-events: none; /* only grabbable while the bar is actually visible (below) */
    cursor: pointer;
    transition: background-color 0.15s ease, width 0.12s ease;
}

.dd-oscroll-bar.dd-oscroll-visible .dd-oscroll-thumb {
    pointer-events: auto;
}

.dd-oscroll-thumb:hover,
body.dd-oscroll-dragging .dd-oscroll-thumb {
    width: 8px;
    background: rgba(0, 128, 128, 0.8);
}

/* Light variant for dark/coloured scroll areas (e.g. the teal sidebar) — pass barClass:'dd-oscroll-light'. */
.dd-oscroll-bar.dd-oscroll-light .dd-oscroll-thumb {
    background: rgba(255, 255, 255, 0.5);
}

.dd-oscroll-bar.dd-oscroll-light .dd-oscroll-thumb:hover,
body.dd-oscroll-dragging .dd-oscroll-bar.dd-oscroll-light .dd-oscroll-thumb {
    background: rgba(255, 255, 255, 0.85);
}

body.dd-oscroll-dragging {
    user-select: none;
}