/*
 * Loader component.
 *
 * A CSS-only spinner for asynchronous actions. Small, quiet, and respectful of reduced-motion
 * preferences — when motion is off, the spinner is replaced with a static "Loading…" text.
 */

.loader {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--colour-border);
    border-top-color: var(--colour-primary);
    border-radius: 50%;
    animation: loader-spin 0.6s linear infinite;
}

.loader--large {
    width: 2rem;
    height: 2rem;
    border-width: 3px;
}

@keyframes loader-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Loading state for buttons */

.button--loading {
    position: relative;
    color: transparent;
    pointer-events: none;
}

.button--loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1rem;
    height: 1rem;
    margin: -0.5rem 0 0 -0.5rem;
    border: 2px solid var(--colour-primary-ink);
    border-top-color: transparent;
    border-radius: 50%;
    animation: loader-spin 0.6s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .loader {
        animation: none;
        border-top-color: var(--colour-primary);
        opacity: 0.6;
    }

    .button--loading::after {
        animation: none;
    }
}