/**
 * form-loader.css - Styles for form loading states
 */

/* Form state when submitting */
form.is-submitting {
    position: relative !important;
}

/* Make form elements appear disabled without actually disabling them */
form.is-submitting input,
form.is-submitting textarea,
form.is-submitting select,
form.is-submitting button {
    opacity: 0.7;
    /* Don't use pointer-events: none as it can interfere with form submission */
}

/* Overlay that covers the form during submission */
.form-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.6);
    z-index: 10;
    border-radius: 4px;
}

/* The spinner animation */
.form-spinner {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    vertical-align: text-bottom;
    border: 0.2em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: form-spinner-animation .75s linear infinite;
    margin-right: 0.5rem;
}

@keyframes form-spinner-animation {
    to {
        transform: rotate(360deg);
    }
}

/* Button styling when in loading state */
button.is-loading {
    position: relative;
}

/* Custom styling for different button types */
.btn-success.is-loading .form-spinner,
.btn-lightgreen.is-loading .form-spinner,
.bg-lightgreen.is-loading .form-spinner {
    color: white;
}

.bg-blue.is-loading .form-spinner {
    color: white;
}

/* Animation for when forms return after submission */
@keyframes formFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Add this class via JS after page load if there are form errors or success messages */
.form-fade-in {
    animation: formFadeIn 0.3s ease-out;
}