/* Loading Spinner Component - Consistent across all buttons */

/* Override conflicting styles from other CSS files */
span.loading-spinner,
.button .loading-spinner {
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    border: 2px solid #e5e7eb !important; /* Fallback for --color-border */
    border-top-color: #059669 !important; /* Fallback for --color-primary */
    border-radius: 50% !important;
    animation: spin 0.8s linear infinite !important;
    margin: 0 !important;
    margin-right: 8px !important;
    padding: 0 !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
    font-size: inherit !important;
    color: inherit !important;
    background: none !important;
    gap: 0 !important;
    position: relative !important;
    top: -1px !important; /* Fine-tune vertical alignment */
}

/* Use CSS variables when available */
@supports (color: var(--color-border)) {
    span.loading-spinner,
    .button .loading-spinner {
        border-color: var(--color-border) !important;
        border-top-color: var(--color-primary) !important;
    }
}

/* Container for loading states (not the spinner itself) */
.loading-spinner-container {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
}

/* Loading container for tool results */
.loading {
    text-align: center;
    padding: var(--spacing-xl);
    color: var(--color-text-light);
}

.loading .loading-spinner {
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-md);
    color: var(--color-primary);
}


/* Button-specific spinner colors */
.button.primary .loading-spinner {
    border-color: rgba(255, 255, 255, 0.3) !important;
    border-top-color: white !important;
}

.button.secondary .loading-spinner {
    border-color: #e5e7eb !important; /* Fallback */
    border-top-color: #059669 !important; /* Fallback */
}

.button.muted .loading-spinner {
    border-color: #e5e7eb !important; /* Fallback */
    border-top-color: #374151 !important; /* Fallback for --color-text */
}

.button.danger .loading-spinner {
    border-color: rgba(220, 53, 69, 0.3) !important;
    border-top-color: #dc3545 !important; /* Fallback */
}

.button.success .loading-spinner {
    border-color: rgba(40, 167, 69, 0.3) !important;
    border-top-color: #28a745 !important; /* Fallback */
}

/* Use CSS variables when available */
@supports (color: var(--color-border)) {
    .button.secondary .loading-spinner {
        border-color: var(--color-border) !important;
        border-top-color: var(--color-primary) !important;
    }
    
    .button.muted .loading-spinner {
        border-color: var(--color-border) !important;
        border-top-color: var(--color-text) !important;
    }
    
    .button.danger .loading-spinner {
        border-top-color: var(--color-danger) !important;
    }
    
    .button.success .loading-spinner {
        border-top-color: var(--color-success) !important;
    }
}

/* Ensure spinner is visible on all backgrounds */
.button:disabled .loading-spinner {
    opacity: 1;
}

/* Spin animation */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Responsive sizing */
@media (max-width: 768px) {
    span.loading-spinner,
    .button .loading-spinner {
        width: 14px !important;
        height: 14px !important;
        margin-right: 6px !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    span.loading-spinner,
    .button .loading-spinner {
        border-width: 3px !important;
    }
    
    .button.primary .loading-spinner {
        border-color: rgba(255, 255, 255, 0.5) !important;
        border-top-color: white !important;
    }
    
    .button.secondary .loading-spinner,
    .button.muted .loading-spinner {
        border-color: #374151 !important; /* Fallback for --color-text */
        border-top-color: #059669 !important; /* Fallback for --color-primary */
    }
    
    /* Use CSS variables when available */
    @supports (color: var(--color-text)) {
        .button.secondary .loading-spinner,
        .button.muted .loading-spinner {
            border-color: var(--color-text) !important;
            border-top-color: var(--color-primary) !important;
        }
    }
}