/* dynamic.css */

[x-cloak] {
    display: none !important;
}


/*
 * HTMX loading state
 */

.htmx-request-active #global-loading {
    opacity: 1;
    visibility: visible;
}


/*
 * Global loading indicator
 */

.global-loading {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;

    height: 3px;

    /* label text is for assistive tech only; the bar is the visual */
    font-size: 0;
    color: transparent;
    overflow: hidden;

    background: linear-gradient(
        90deg,
        var(--gold-dark),
        var(--gold) 35%,
        var(--gold-light) 50%,
        var(--gold) 65%,
        var(--gold-dark)
    );
    background-size: 200% 100%;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.15s ease,
        visibility 0.15s ease;

    z-index: 9999;
}

.htmx-request-active #global-loading,
.up-loading #global-loading {
    animation: global-loading-slide 1.1s linear infinite;
}

@keyframes global-loading-slide {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}


/*
 * Unpoly loading state
 */

.up-loading #global-loading {
    opacity: 1;
    visibility: visible;
}


/*
 * Unpoly's built-in progress bar, themed
 */

up-progress-bar {
    background: var(--gold);
    z-index: 10000;
}


/*
 * Unpoly current navigation
 * (sidebar active styling lives in components.css)
 */

.up-current {
    font-weight: inherit;
}


/*
 * Loading buttons
 */

.htmx-request {
    cursor: wait;
}


/*
 * HTMX swap transitions
 */

.htmx-swapping {
    opacity: 0;
    transition: opacity 0.15s ease;
}

.htmx-added {
    opacity: 0;
}

.htmx-settling {
    opacity: 1;
    transition: opacity 0.2s ease;
}


/*
 * HTMX indicators (elements using .htmx-indicator)
 */

.htmx-indicator {
    opacity: 0;
    transition: opacity 0.15s ease;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    opacity: 1;
}


/*
 * Prevent accidental interaction
 * during important requests.
 */

.htmx-request[disabled] {
    pointer-events: none;
    opacity: 0.7;
}


/*
 * Unpoly: element currently being followed/submitted
 */

.up-active {
    cursor: progress;
}


.htmx-test-result {
    margin-top: 16px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--text-secondary);
    font-size: 13px;
}