/* EZRS loading spinner, variant 04 "Facetten" — the six facets of the EZRS hexagon light up in turn.
   Markup: _macros/spinner.html (templates) or $.ezrsSpinner('markup', size) (JS).
   Overlays: $.ezrsSpinner('show' | 'hide' | 'showIn' | 'hideIn') — see /static/js/ezrs-spinner.js */

/* ── The spinner ────────────────────────────────────────────────────────── */

.ezrs-spinner {
    --ezrs-spinner-size: 48px;   /* width; the height follows (hexagon 100:112) */
    --ezrs-spinner-speed: 1.2s;  /* one round */
    --ezrs-spinner-dim: .18;     /* opacity of the facets at rest */
    --ezrs-c-light: #00C463;
    --ezrs-c-mid: #00B85C;
    --ezrs-c-base: #00A651;
    --ezrs-c-dark: #006B2E;
    display: inline-flex;
    line-height: 1;
    vertical-align: middle;
}

.ezrs-spinner svg {
    display: block;
    width: var(--ezrs-spinner-size);
    height: calc(var(--ezrs-spinner-size) * 1.12);
    overflow: visible;
}

.ezrs-spinner .ezrs-f {
    opacity: var(--ezrs-spinner-dim);
    animation: ezrs-facet var(--ezrs-spinner-speed) ease-in-out infinite;
}
.ezrs-spinner .ezrs-f1 { fill: var(--ezrs-c-light); }
.ezrs-spinner .ezrs-f2 { fill: var(--ezrs-c-base);  animation-delay: calc(var(--ezrs-spinner-speed) * 1 / 6); }
.ezrs-spinner .ezrs-f3 { fill: var(--ezrs-c-dark);  animation-delay: calc(var(--ezrs-spinner-speed) * 2 / 6); }
.ezrs-spinner .ezrs-f4 { fill: var(--ezrs-c-mid);   animation-delay: calc(var(--ezrs-spinner-speed) * 3 / 6); }
.ezrs-spinner .ezrs-f5 { fill: var(--ezrs-c-light); animation-delay: calc(var(--ezrs-spinner-speed) * 4 / 6); }
.ezrs-spinner .ezrs-f6 { fill: var(--ezrs-c-mid);   animation-delay: calc(var(--ezrs-spinner-speed) * 5 / 6); }

@keyframes ezrs-facet {
    0%, 100% { opacity: var(--ezrs-spinner-dim); }
    20%      { opacity: 1; }
    45%      { opacity: var(--ezrs-spinner-dim); }
}

/* Sizes */
.ezrs-spinner--xs { --ezrs-spinner-size: 16px; }
.ezrs-spinner--sm { --ezrs-spinner-size: 24px; }
.ezrs-spinner--md { --ezrs-spinner-size: 48px; }
.ezrs-spinner--lg { --ezrs-spinner-size: 80px; }
.ezrs-spinner--xl { --ezrs-spinner-size: 120px; }

/* One colour: the text colour (e.g. inside a button) */
.ezrs-spinner--mono {
    --ezrs-c-light: currentColor;
    --ezrs-c-mid: currentColor;
    --ezrs-c-base: currentColor;
    --ezrs-c-dark: currentColor;
    --ezrs-spinner-dim: .25;
}

/* A standalone status (spinner() macro): the spinner plus its screen-reader label */
.ezrs-spinner-status {
    display: inline-flex;
    vertical-align: middle;
}

/* ── Overlays ───────────────────────────────────────────────────────────── */

/* Global: fullscreen, toggled by $.ezrsSpinner('show' | 'hide') */
.ezrs-spinner-overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background-color: rgba(244, 248, 245, 0.85);
    backdrop-filter: blur(2px);
    z-index: 1080;
}

.ezrs-spinner-overlay.is-active {
    display: flex;
}

/* Inline: scoped to a target element, mounted by $.ezrsSpinner('showIn', target) */
.ezrs-spinner-overlay--inline {
    position: absolute;
    inset: 0;
    z-index: 5;
}

/* Less motion when the system asks for it: three times slower */
@media (prefers-reduced-motion: reduce) {
    .ezrs-spinner .ezrs-f {
        animation-duration: calc(var(--ezrs-spinner-speed) * 3);
    }
}