/* Styles pour les composants HTMX */

/* Indicateur de chargement global */
.htmx-indicator {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    pointer-events: none;
}

.htmx-request .htmx-indicator {
    opacity: 1;
    pointer-events: auto;
}

/* Animation du spinner */
.fa-spinner {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Styles pour le bouton pendant le chargement */
button:has(.htmx-indicator) {
    position: relative;
}

/* Amélioration de l'UX pendant le chargement */
.htmx-request button {
    cursor: not-allowed;
    opacity: 0.8;
}

/* Animation de fade pour le contenu qui change */
.htmx-swapping {
    opacity: 0.5;
    transition: opacity 0.2s ease-in-out;
}

/* Indicateur de chargement dans le bouton */
.htmx-indicator {
    display: none;
}

.htmx-request .htmx-indicator {
    display: flex;
}

.htmx-request .htmx-indicator:hidden {
    display: none;
}