/* Chargement — modèle canonique ; son emploi : canon_loader.md. */

@layer components {
    .loader {
        color: var(--canon-theme-muted);
    }
}

@layer components {
    .loader--spinner {
        display: inline-block;
        width: var(--loader-side, 1.5rem);
        aspect-ratio: 1;
    }
    .loader--skeleton {
        display: block;
        height: var(--loader-height, 1em);
    }

    .loader--spinner {
        border: 2px solid var(--canon-theme-line);
        border-block-start-color: var(--canon-theme-action);
        border-radius: var(--canon-radius-pill);
    }
    .loader--skeleton {
        border-radius: var(--canon-radius-control);
        background-color: var(--canon-theme-highlight);
    }

    .loader--spinner {
        animation: loader-spinner 800ms linear infinite;
    }
    .loader--skeleton,
    .loader--text {
        animation: loader-pulse 1200ms ease-in-out infinite alternate;
    }
    @media (prefers-reduced-motion: reduce) {
        .loader--spinner,
        .loader--skeleton,
        .loader--text {
            animation: none;
        }
    }
    @keyframes loader-spinner {
        to {
            transform: rotate(1turn);
        }
    }
    @keyframes loader-pulse {
        to {
            opacity: 0.5;
        }
    }
}