/**
 * Loading Animation for Buttons (GitHub-style shimmer)
 * 
 * Subtle shimmer overlay effect for buttons during loading states.
 * Apply 'is-loading' class to trigger the animation.
 * 
 * Requirements:
 * - Element must have `position: relative`
 * - Element should have `overflow: hidden`
 * 
 * CSS Variables (define in :root):
 * - --loading-shimmer-color: Shimmer highlight (default: rgba(255,255,255,0.4))
 * - --loading-transition-duration: Fade in/out duration (default: 0.3s)
 * 
 * Color Palette Classes:
 * - (default)              : White shimmer - for dark/colored backgrounds
 * - .shimmer-dark          : Dark shimmer - for white/light backgrounds
 * - .shimmer-blue          : Blue shimmer - for neutral backgrounds
 * - .shimmer-subtle        : Very subtle shimmer - minimal effect
 * 
 * Usage:
 * <button class="btn btn-loading-ready is-loading">Dark bg</button>
 * <button class="btn btn-loading-ready shimmer-dark is-loading">White bg</button>
 * <button class="btn btn-loading-ready shimmer-blue is-loading">Neutral bg</button>
 */

/* ============================================
   Keyframe Animations
   ============================================ */

@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

/* ============================================
   Button Loading Styles
   ============================================ */

.btn-loading-ready {
    position: relative;
    overflow: hidden;
}

/* Shimmer overlay */
.btn-loading-ready::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--loading-shimmer-color, rgba(255, 255, 255, 0.4)) 50%,
        transparent 100%
    );
    opacity: 0;
    pointer-events: none;
    transform: translateX(-100%);
    transition: opacity var(--loading-transition-duration, 0.3s) ease;
}

/* Loading state */
.btn-loading-ready.is-loading {
    pointer-events: none;
    cursor: wait;
    user-select: none;
}

.btn-loading-ready.is-loading::after {
    opacity: 1;
    animation: shimmer 1.2s ease-in-out infinite;
}

/* Dim text/content inside button */
.btn-loading-ready.is-loading > *:not(.loading-spinner) {
    opacity: 0.6;
}

/* If button has direct text (no wrapper), dim the whole button slightly */
.btn-loading-ready.is-loading {
    color: inherit;
}

/* Disabled styling - ensure button looks inactive */
.btn-loading-ready.is-loading,
.btn-loading-ready[disabled],
.btn-loading-ready:disabled {
    opacity: 0.85;
}

/* ============================================
   Color Palettes
   ============================================ */

/* Dark shimmer - for white/light backgrounds */
.btn-loading-ready.shimmer-dark::after {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(0, 0, 0, 0.18) 50%,
        transparent 100%
    );
}

/* Blue shimmer - for neutral backgrounds */
.btn-loading-ready.shimmer-blue::after {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(14, 149, 226, 0.25) 50%,
        transparent 100%
    );
}

/* Subtle shimmer - minimal effect */
.btn-loading-ready.shimmer-subtle::after {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.2) 50%,
        transparent 100%
    );
}

/* Gray shimmer - for colored backgrounds */
.btn-loading-ready.shimmer-gray::after {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(128, 128, 128, 0.2) 50%,
        transparent 100%
    );
}

/* ============================================
   Spinning Loader Icon
   ============================================ */

.loading-spinner {
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    vertical-align: middle;
    margin-right: 0.4em;
    opacity: 0.7;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ============================================
   Reduced Motion
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .btn-loading-ready.is-loading::after,
    .loading-spinner {
        animation: none;
    }
    
    .btn-loading-ready.is-loading {
        opacity: 0.7;
    }
}