/**
 * Sparkles Loading States & Spinners
 * Reusable loading indicators and skeleton screens
 * Extracted from Amasty Rules and enhanced for general use
 * Extends: sparkles-utilities.css, sparkles-animations.css, sparkles-tokens.css
 * All 3 optimization layers applied: keyframes consolidated, patterns extracted, component organization
 */

/* ========== SPINNER VARIANTS ========== */
/* Note: Spinner classes consolidated to sparkles-utilities.css to avoid conflicts.
   Use .sparkles-spinner-base + size classes (.sparkles-spinner-xs, .sparkles-spinner-sm, etc.)
   Color variants: .sparkles-spinner-white, .sparkles-spinner-primary
   Conflict Resolution: Removed duplicate definitions, use utilities version */

/* ========== LOADING CONTAINERS ========== */

/* Full page loading */
/* Note: .sparkles-loading-overlay moved to sparkles-page-transitions.css to avoid duplication */

/* Section loading */
.sparkles-loading-container {
    min-height: 100px;
    position: relative;
}

.sparkles-banner-background,
.sparkles-loading-container.is-loading::before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: var(--z-dropdown);
}

.sparkles-loading-container.is-loading::before {
    content: '';
    background: rgba(255, 255, 255, 0.8); /* Keep raw for rgba */
}

.sparkles-loading-container.is-loading::after {
    content: '';
    border-color: var(--gray-200);
    border-top-color: var(--color-primary);
    animation: sparkles-spin 1s linear infinite; /* Keep raw for animation */
    z-index: var(--z-sticky); /* Keep raw for CSS variable */ position: absolute; width: 2rem; height: 2rem; border-width: 4px; border-radius: var(--radius-full);
}

/* Inline loading */
.sparkles-loading-inline {
    display: inline-flex;
    color: var(--gray-600);
}

/* Button loading */
.sparkles-btn.sparkles-btn-loading {
    color: transparent;
    position: relative;
}


/* ========== SKELETON SCREENS ========== */

.sparkles-skeleton {
    background: linear-gradient(
        90deg,
        var(--gray-200) 25%,
        var(--gray-100) 50%,
        var(--gray-200) 75%
    );
    background-size: 200% 100%;
    animation: pulse 2s cubic-bezier(.4,0,.6,1) infinite;
    border-radius: .125rem;
}

/* Skeleton variants */
.sparkles-skeleton-text {
    height: 1em;
    margin-bottom: .5rem;
    border-radius: .25rem;
}

.sparkles-skeleton-title {
    height: 1.5em;
    width: 60%;
    margin-bottom: .75rem;
}

.sparkles-skeleton-paragraph {
    margin-bottom: 1rem;
}

.sparkles-skeleton-paragraph .sparkles-skeleton-text:last-child {
    width: 80%;
}

.sparkles-skeleton-button,
.sparkles-skeleton-image {
    border-radius: .375rem;
}

.sparkles-skeleton-button {
    width: 120px;
    height: 2.5rem;
}

/* Skeleton width helpers */
.sparkles-skeleton-width-80 {
    width: 80px;
}

.sparkles-skeleton-width-60 {
    width: 60px;
}

.sparkles-skeleton-width-80p {
    width: 80%;
}

.sparkles-skeleton-width-100 {
    width: 100px;
}

.sparkles-skeleton-image {
    height: 200px;
    width: 100%;
}

.sparkles-skeleton-card {
    padding: 1rem;
}

/* ========== PROGRESS INDICATORS ========== */

.sparkles-progress-dots {
    display: inline-flex;
    gap: .25rem;
}

.sparkles-progress-dot {
    background-color: var(--color-primary);
    width: .5rem;
    height: .5rem;
    border-radius: var(--radius-full);
    animation: pulse 2s cubic-bezier(.4,0,.6,1) infinite;
}

.sparkles-progress-dot:first-child {
    animation-delay: -0.32s;
}

.sparkles-progress-dot:nth-child(2) {
    animation-delay: -0.16s;
}

/* ========== LOADING MESSAGES ========== */

.sparkles-loading-message {
    text-align: center;
    padding: 2rem;
}

.sparkles-loading-icon {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1rem;
}

.sparkles-upload-text,
.sparkles-loading-title {
    font-weight: 500;
    color: var(--gray-900);
}

/* ========== ANIMATIONS ========== */
/* Note: All keyframes consolidated to sparkles-animations.css - using shared animations */

/* ========== ACCESSIBILITY ========== */

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .sparkles-spinner,
    .sparkles-skeleton,
    .sparkles-progress-dot,
    .sparkles-loading-container.is-loading::after,
    .sparkles-btn-loading::after {
        animation: none;
    }
    
    .sparkles-skeleton {
        background-color: var(--gray-200);
    }
}

/* ========== UTILITIES ========== */

/* Hide content while loading */
.sparkles-loading-hide {
    visibility: hidden;
}

/* Blur content while loading */
.sparkles-loading-blur {
    --tw-blur: blur(4px);
    pointer-events: none;
    user-select: none;
}

/* Dim content while loading */
.sparkles-loading-dim {
    opacity: .5;
    pointer-events: none;
    user-select: none;
}