/* ==========================================================
   EngageX HTMX
   ========================================================== */

/* ==========================================================
   Indicators
   ========================================================== */

.htmx-indicator {
    display: none;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    display: inline-block;
}

/* ==========================================================
   Request State
   ========================================================== */

.htmx-request {
    cursor: wait;
}

.htmx-request-active {
    cursor: wait;
}

/* ==========================================================
   Swapping
   ========================================================== */

.htmx-swapping {
    opacity: 0.5;

    transition:
        opacity 0.2s ease;
}

/* ==========================================================
   Settling
   ========================================================== */

.htmx-settling {
    opacity: 1;
}

/* ==========================================================
   Loading
   ========================================================== */

.vx-loading {
    opacity: 0.6;

    pointer-events: none;
}

/* ==========================================================
   Global Loading Indicator
   ========================================================== */

.htmx-loading-indicator {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    z-index: 9999;

    pointer-events: none;

    opacity: 0;

    transition:
        opacity 0.2s ease;
}

.htmx-request-active .htmx-loading-indicator {
    opacity: 1;
}

.htmx-loading-bar {
    width: 40%;
    height: 100%;

    background: var(--vx-primary);

    animation:
        vx-htmx-loading 1s ease-in-out infinite;
}

@keyframes vx-htmx-loading {
    0% {
        transform: translateX(-100%);
    }

    50% {
        transform: translateX(150%);
    }

    100% {
        transform: translateX(250%);
    }
}