/* =========================================================
   DEFAULT SEXY SCROLLBARS (SAFE)
   - Styles ALL existing scrollbars sitewide
   - Does NOT create scrollbars (no overflow rules here)
   - Transparent until hover, more solid on hover/drag
   - Uses your theme vars: --text-base, --main
   ========================================================= */

:root {
    /* Size + “floating pill” look */
    --sb-size: 10px; /* thickness */
    --sb-inset: 3px; /* inner padding that makes the thumb look floating */
    /* Derived colors */
    --sb-thumb: color-mix(in srgb, var(--text-base) 16%, transparent);
    --sb-thumb-soft: color-mix(in srgb, var(--text-base) 10%, transparent);
    --sb-thumb-hover: color-mix(in srgb, var(--text-base) 40%, transparent);
    --sb-thumb-active: color-mix(in srgb, var(--text-base) 60%, transparent);
    /* Soft glow on hover (accent-aware) */
    --sb-glow: color-mix(in srgb, var(--main), transparent 78%);
}

/* -----------------------------
   Firefox (global)
   ----------------------------- */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--sb-thumb) transparent;
}

    /* -----------------------------
   Chromium/WebKit (global)
   ----------------------------- */
    *::-webkit-scrollbar {
        width: var(--sb-size);
        height: var(--sb-size);
    }

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

    /* Thumb is very subtle by default */
    *::-webkit-scrollbar-thumb {
        background: var(--sb-thumb-soft);
        border-radius: 999px;
        /* “floating pill” illusion */
        border: var(--sb-inset) solid transparent;
        background-clip: content-box;
        transition: background-color .15s ease, box-shadow .15s ease;
    }

    /* Become solid only when the user is interacting with that element */
    *:hover::-webkit-scrollbar-thumb,
    *:focus-within::-webkit-scrollbar-thumb {
        background: var(--sb-thumb-hover);
        box-shadow: 0 0 0 3px var(--sb-glow);
    }

    /* While dragging */
    *::-webkit-scrollbar-thumb:active {
        background: var(--sb-thumb-active);
        box-shadow: 0 0 0 3px var(--sb-glow);
    }

    /* Corner where both axes scroll */
    *::-webkit-scrollbar-corner {
        background: transparent;
    }

/* =========================================================
   OPTIONAL: Layout stability (prevents width jump)
   Apply only to known scroll containers (recommended)
   ========================================================= */

/*
.scrollbar-inner,
.DeviceList,
.GTAssetDropdown,
#mapmenudropdown,
#closesttrackerscrow,
#divAssetView,
#divPropertiesData{
  scrollbar-gutter: stable;
}
*/