/**
 * XHR Tag Loading States
 *
 * Apply to containers: .xhr-loading, .xhr-loaded, .xhr-error
 */

/* Base container - hide content until loaded */
[data-xhr-template] {
    position: relative;
    min-height: 2rem;
}

/* Loading state */
.xhr-loading {
    pointer-events: none;
    border: 1px solid #fecaca;
}

.xhr-loading > *:not(.xhr-loader) {
    visibility: hidden;
}

/* Loading spinner overlay */
.xhr-loading::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.5rem;
    height: 1.5rem;
    margin: -0.75rem 0 0 -0.75rem;
    border: 2px solid #e5e7eb;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: xhr-spin 0.8s linear infinite;
    z-index: 10;
}

/* Loading background */
.xhr-loading::after {
    content: 'Loading ...';
    /* position: absolute; */
    inset: 0;
    /* background: rgba(255, 255, 255, 0.7); */
    z-index: 5;
}

/* Loaded state */
.xhr-loaded::before,
.xhr-loaded::after {
    display: none;
}

.xhr-loaded > * {
    visibility: visible;
}

/* Error state */
.xhr-error {
    border: 1px solid #fecaca;
    background: #fef2f2;
    padding: 0.5rem;
    border-radius: 0.25rem;
}

.xhr-error::before {
    content: '⚠ Loading failed';
    display: block;
    color: #dc2626;
    font-size: 0.875rem;
}

.xhr-error::after {
    display: none;
}

/* Spin animation */
@keyframes xhr-spin {
    to {
        transform: rotate(360deg);
    }
}

/* =========================================================================
   Alternative: Skeleton loading (opt-in with .xhr-skeleton class)
   ========================================================================= */

.xhr-skeleton.xhr-loading {
    background: linear-gradient(
        90deg,
        #f0f0f0 25%,
        #e0e0e0 50%,
        #f0f0f0 75%
    );
    background-size: 200% 100%;
    animation: xhr-skeleton-pulse 1.5s ease-in-out infinite;
}

.xhr-skeleton.xhr-loading::before,
.xhr-skeleton.xhr-loading::after {
    display: none;
}

@keyframes xhr-skeleton-pulse {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* =========================================================================
   Alternative: Fade transition (opt-in with .xhr-fade class)
   ========================================================================= */

.xhr-fade {
    transition: opacity 0.3s ease;
}

.xhr-fade.xhr-loading {
    opacity: 0.5;
}

.xhr-fade.xhr-loading::before,
.xhr-fade.xhr-loading::after {
    display: none;
}

.xhr-fade.xhr-loaded {
    opacity: 1;
}