/**
 * Global Spinner Button Component
 * Uses FontAwesome spinning icon for consistent loading state
 */

/* Base spinner button styling */
.btn.spinner {
    position: relative;
    pointer-events: none;
    /* Override flex properties to ensure proper centering */
    justify-content: center;
    align-items: center;
}

.btn.spinner .btn-text {
    /* Make invisible but keep the space to maintain button width */
    opacity: 0;
}

.btn.spinner .btn-spinner {
    /* Position spinner absolutely in the center of the button */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex !important;
    align-items: center;
    justify-content: center;
}

/* Fallback: If using ::before pseudo-element approach without spans */
.btn.spinner::before {
    content: '\f110'; /* FontAwesome spinner icon */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    color: var(--color-white);
    animation: fa-spin 1s linear infinite;
    display: none; /* Hide by default, only show if no btn-spinner span */
}

/* Show ::before spinner only if no btn-spinner span exists */
.btn.spinner:not(:has(.btn-spinner))::before {
    display: block;
}

/* FontAwesome spin animation */
@keyframes fa-spin {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Different button sizes */
.btn.btn-sm.spinner::before {
    font-size: 14px;
}

.btn.btn-lg.spinner::before {
    font-size: 20px;
}

/* Primary button spinner */
.btn.btn--primary.spinner::before,
.btn.btn-primary.spinner::before {
    color: var(--color-white);
}

/* Secondary button spinner */
.btn.btn--secondary.spinner::before,
.btn.btn-secondary.spinner::before {
    color: var(--color-white);
}

/* Outline button spinner */
.btn.btn-outline-primary.spinner::before {
    color: var(--color-primary);
}

.btn.btn-outline-secondary.spinner::before {
    color: var(--color-secondary);
}

/* Light/ghost button spinner */
.btn.btn-light.spinner::before,
.btn.btn-outline.spinner::before {
    color: var(--color-gray-600);
}

/* Dark button spinner */
.btn.btn-dark.spinner::before {
    color: var(--color-white);
}

/* Success button spinner */
.btn.btn-success.spinner::before {
    color: var(--color-white);
}

/* Danger button spinner */
.btn.btn-danger.spinner::before {
    color: var(--color-white);
}

/* Warning button spinner */
.btn.btn-warning.spinner::before {
    color: var(--color-white);
}

/* Info button spinner */
.btn.btn-info.spinner::before {
    color: var(--color-white);
}

/* Disabled state */
.btn.spinner:disabled {
    cursor: not-allowed;
    opacity: 0.8;
}

/* Focus states - maintain accessibility */
.btn.spinner:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Responsive spinner sizing */
@media (max-width: 768px) {
    .btn.spinner::before {
        font-size: 14px;
    }
}

/* Base styling for button text and spinner spans */
.btn .btn-text {
    transition: opacity 0.2s ease;
}

.btn .btn-spinner {
    display: none;
}

/* Support for buttons with explicit text/spinner spans using loading class */
.btn.loading .btn-text {
    opacity: 0;
}

.btn.loading .btn-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex !important;
    align-items: center;
    justify-content: center;
}