/*
 * ==========================================================
 * INSTITUTE — GLOBAL SCROLLBARS V1
 *
 * Compartido por:
 * - Web
 * - Panel de usuario
 * - Admin
 *
 * Los colores se derivan automáticamente de Central de Temas.
 * No constituye una familia nueva de settings.
 * ==========================================================
 */

:root {
    --institute-scrollbar-size: 5px;

    --institute-scrollbar-track:
        transparent;

    --institute-scrollbar-thumb:
        color-mix(
            in srgb,
            var(--theme-text-muted, #aeb6c2) 48%,
            transparent
        );

    --institute-scrollbar-thumb-hover:
        color-mix(
            in srgb,
            var(--theme-accent, #b20000) 32%,
            var(--theme-text-muted, #aeb6c2)
        );

    --institute-scrollbar-thumb-active:
        color-mix(
            in srgb,
            var(--theme-accent, #b20000) 48%,
            var(--theme-text-muted, #aeb6c2)
        );
}


/* ==========================================================
 * FIREFOX
 * ========================================================== */

* {
    scrollbar-width: thin;
    scrollbar-color:
        var(--institute-scrollbar-thumb)
        var(--institute-scrollbar-track);
}


/* ==========================================================
 * CHROMIUM / EDGE / SAFARI
 * ========================================================== */

*::-webkit-scrollbar {
    width: var(--institute-scrollbar-size);
    height: var(--institute-scrollbar-size);
}

*::-webkit-scrollbar-track {
    background: var(--institute-scrollbar-track);
}

*::-webkit-scrollbar-thumb {
    min-height: 28px;

    background: var(--institute-scrollbar-thumb);

    border: 1px solid transparent;
    border-radius: 999px;

    background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--institute-scrollbar-thumb-hover);
    background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:active {
    background: var(--institute-scrollbar-thumb-active);
    background-clip: padding-box;
}

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


/* Quitar botones/flechas nativos cuando el motor los expone */
*::-webkit-scrollbar-button {
    width: 0;
    height: 0;
    display: none;
}


/* ==========================================================
 * SIMPLEBAR
 * El Panel utiliza SimpleBar en algunos componentes.
 * ========================================================== */

.simplebar-track.simplebar-vertical {
    width: 6px;
}

.simplebar-track.simplebar-horizontal {
    height: 6px;
}

.simplebar-track {
    background: transparent;
}

.simplebar-scrollbar::before {
    background: var(--institute-scrollbar-thumb) !important;
    border-radius: 999px !important;
    opacity: .72 !important;
}

.simplebar-scrollbar.simplebar-visible::before {
    opacity: .90 !important;
}

.simplebar-scrollbar:hover::before {
    background: var(--institute-scrollbar-thumb-hover) !important;
    opacity: 1 !important;
}