/* ============================================================
   HurryUpCabs — Global Scrollbar
   Uses theme variables from color.css
   ============================================================ */

/* Firefox */
html {
    scrollbar-width: thin;
    scrollbar-color: var(--huc-accent-clr) var(--huc-bg-clr);
}

/* Chrome, Edge, Safari */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background-color: var(--huc-bg-clr);
    border-radius: 999px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(
        180deg,
        var(--huc-accent-clr) 0%,
        color-mix(in srgb, var(--huc-accent-clr) 80%, var(--huc-darkGray-clr)) 100%
    );
    border-radius: 999px;
    border: 2px solid var(--huc-bg-clr);
    min-height: 40px;
    transition: background var(--transition-base);
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--huc-accent-clr) 90%, var(--huc-darkGray-clr)) 0%,
        color-mix(in srgb, var(--huc-accent-clr) 65%, var(--huc-darkGray-clr)) 100%
    );
}

::-webkit-scrollbar-thumb:active {
    background: var(--huc-blue-clr);
    border-color: var(--huc-bg-clr);
}

::-webkit-scrollbar-corner {
    background-color: var(--huc-bg-clr);
}