/**
 * Button Loading States CSS
 * Styles for buttons with loading indicators
 */

/* Button loading state */
.btn-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.7;
    cursor: not-allowed !important;
}

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

/* Spinner animation (Bootstrap already provides this, but including for reference) */
@keyframes spinner-border {
    to {
        transform: rotate(360deg);
    }
}

/* Make sure spinner is aligned properly */
.btn-loading .spinner-border {
    vertical-align: text-bottom;
}

/* Optional: Add a subtle pulse effect to loading buttons */
@keyframes btn-loading-pulse {
    0%, 100% {
        opacity: 0.7;
    }
    50% {
        opacity: 0.85;
    }
}

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

/* Ensure buttons maintain their width during loading to prevent layout shift */
.btn-loading {
    min-width: fit-content;
}

/* Style for buttons that should have explicit loading attribute */
button[data-loading="true"] {
    transition: opacity 0.2s ease-in-out;
}

/* Disabled state should look similar to loading state */
button:disabled:not(.btn-loading) {
    opacity: 0.6;
    cursor: not-allowed;
}