/**
 * Sahara Tools Public CSS
 */

/* Remote Slider Controller */
.sahara-remote-slider {
    cursor: pointer;
}

/* Base interactive items */
.sahara-remote-slider,
.sahara-remote-slider[data-active],
.sahara-remote-slider>* {
    transition: all 0.5s ease-in-out;
}

/* Active State Indicators (Background and Text) */
.sahara-remote-slider[data-active="true"],
.sahara-remote-slider.is-active,
.sahara-remote-slider>[data-active="true"],
.sahara-remote-slider>.is-active {
    background-color: #ffffff80 !important;
    color: #000 !important;
    opacity: 1 !important;
    transform: scale(1.05);
    border-color: #ffffff !important;
    border-width: 0.5px !important;
    border-style: solid !important;
}

/* Inactive State Indicators */
.sahara-remote-slider[data-active="false"],
.sahara-remote-slider:not(.is-active):not([data-active="true"]),
.sahara-remote-slider>[data-active="false"],
.sahara-remote-slider>*:not(.is-active):not([data-active="true"]) {
    opacity: 0.75;
}

/* Liquid Glass Effect */
.liquid-glass,
.\.liquid-glass,
.brxe-button.liquid-glass,
.brxe-button.\.liquid-glass {
    background: rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(12px) saturate(180%) url(#liquid-glass-filter) !important;
    -webkit-backdrop-filter: blur(12px) saturate(180%) url(#liquid-glass-filter) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    box-shadow:
        0 4px 15px rgba(0, 0, 0, 0.1),
        inset 0 0 10px rgba(255, 255, 255, 0.2) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    isolation: isolate;
    color: #fff !important;
}

/* Ensure Bricks background doesn't block the glass effect */
.brxe-button.liquid-glass:after {
    display: none !important;
}

/* CSS entry states */
.sahara-tab-anim .tab-pane,
.sahara-tab-anim .bricks-tabs-nested-pane {
    opacity: 0;
    transform: translateY(10px);
    transition: none !important;
}

/* JS-triggered animation for both Nestable and standard tabs */
.sahara-tab-anim .tab-pane.sahara-animating,
.sahara-tab-anim .bricks-tabs-nested-pane.sahara-animating {
    animation: saharaFadeInUp 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards !important;
}

@keyframes saharaFadeInUp {
    0% {
        opacity: 0;
        transform: translateY(15px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}