/**
 * Button Loading State Styles
 *
 * Provides visual feedback when buttons are in loading state.
 * Works with button-loading.js for automatic spinner integration.
 */

/* Base loading state - applied to any button in loading state */
.btn-loading-active {
    position: relative;
    cursor: not-allowed !important;
    opacity: 0.85;
    pointer-events: none;
}

/* Ensure spinner icon is visible and animated */
.btn-loading-active .fa-spinner {
    display: inline-block !important;
}

/* Smooth transition for button state changes */
.btn-loading,
.btn[data-loading="true"],
button[type="submit"] {
    transition: opacity 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

/* Ensure disabled state looks properly disabled */
.btn-loading-active:disabled,
.btn-loading-active[disabled] {
    opacity: 0.75;
}

/* Primary button loading state - maintain brand colors */
.btn-primary.btn-loading-active {
    background-color: var(--primary-dark, #4b48c8);
    border-color: var(--primary-dark, #4b48c8);
}

/* Success button loading state */
.btn-success.btn-loading-active {
    background-color: #157347;
    border-color: #157347;
}

/* Danger button loading state */
.btn-danger.btn-loading-active {
    background-color: #bb2d3b;
    border-color: #bb2d3b;
}

/* Secondary/outline button loading state */
.btn-secondary.btn-loading-active,
.btn-outline-primary.btn-loading-active,
.btn-outline-secondary.btn-loading-active {
    opacity: 0.7;
}

/* Link-style button loading state */
.btn-link.btn-loading-active {
    opacity: 0.6;
}

/* Large buttons - slightly larger spinner spacing */
.btn-lg.btn-loading-active .fa-spinner {
    margin-right: 0.5rem;
}

/* Small buttons - tighter spinner spacing */
.btn-sm.btn-loading-active .fa-spinner {
    margin-right: 0.25rem;
    font-size: 0.875em;
}

/* Social login buttons - special handling */
.nextdoor-social-btn.btn-loading-active,
.social-btn.btn-loading-active {
    opacity: 0.7;
}

/* Form submit buttons in cards */
.card .btn-loading-active {
    min-width: 120px;
}

/* Prevent text selection during loading */
.btn-loading-active * {
    user-select: none;
}

/* Accessibility: Ensure spinner is visible for screen readers */
.btn-loading-active .fa-spinner::before {
    content: "";
}

/* Add subtle pulse animation to loading buttons for extra feedback */
@@keyframes btn-loading-pulse {
    0%, 100% {
        opacity: 0.85;
    }
    50% {
        opacity: 0.65;
    }
}

.btn-loading-active {
    animation: btn-loading-pulse 1.5s ease-in-out infinite;
}

/* Mobile responsiveness */
@@media (max-width: 576px) {
    .btn-loading-active {
        min-width: auto !important;
    }

    /* On mobile, ensure full-width buttons maintain their width */
    .btn-loading-active.w-100,
    .btn-loading-active.btn-block {
        width: 100% !important;
    }
}

/* High contrast mode support */
@@media (prefers-contrast: high) {
    .btn-loading-active {
        opacity: 1;
        outline: 2px solid currentColor;
        outline-offset: 2px;
    }
}

/* Reduced motion support */
@@media (prefers-reduced-motion: reduce) {
    .btn-loading-active {
        animation: none;
    }

    .btn-loading-active .fa-spinner {
        animation: none;
    }
}