/* Icone Lucide — vocabolario di dimensione e colore per <x-icon>.
   Vedi resources/views/components/icon.blade.php.

   Perché una classe e non style="": la CSP ha style-src-attr 'none'
   (config/security.php), quindi gli attributi style inline vengono scartati
   in silenzio in produzione. Ogni variazione passa da qui.

   Il colore non ha bisogno di regole: gli SVG Lucide hanno
   stroke="currentColor" e prendono il `color` del contenitore. Le .ico-*
   di colore qui sotto servono solo quando l'icona deve staccarsi dal testo.

   Gli SVG sorgente dichiarano width/height 24: il CSS li sovrascrive
   (una regola CSS batte sempre un attributo di presentazione) e quel 24
   resta come fallback se il foglio non arriva. */

/*
 * Fallback globale per gli SVG inline che non dichiarano width/height.
 * Senza una dimensione esplicita il browser assegna loro il viewport
 * predefinito 300x150: un'icona può quindi diventare enorme quando il CSS
 * del suo contenitore non viene caricato o arriva dalla cache. :where()
 * mantiene volutamente specificità zero, così le regole delle illustrazioni
 * e dei componenti possono continuare a dimensionare gli SVG come previsto.
 */
:where(svg:not([width]), svg:not([height])) {
    display: block;
    max-width: 100%;
}

:where(svg:not([width])) {
    width: 1em;
}

:where(svg:not([height])) {
    height: 1em;
}

.ico {
    width: var(--ico-size, 16px);
    height: var(--ico-size, 16px);
    flex: none;
    vertical-align: -0.125em;
}

/* ─── Dimensione ─────────────────────────────────────────────────────────── */

.ico-12 {
    --ico-size: 12px;
}

.ico-14 {
    --ico-size: 14px;
}

.ico-16 {
    --ico-size: 16px;
}

.ico-18 {
    --ico-size: 18px;
}

.ico-20 {
    --ico-size: 20px;
}

.ico-24 {
    --ico-size: 24px;
}

.ico-32 {
    --ico-size: 32px;
}

.ico-40 {
    --ico-size: 40px;
}

/* Scala col font-size del contenitore: per icone dentro un testo. */
.ico-em {
    --ico-size: 1em;
}

/* ─── Colore ─────────────────────────────────────────────────────────────── */

.ico-accent {
    color: var(--color-accent);
}

.ico-muted {
    color: var(--color-ink-subtle);
}

.ico-positive {
    color: var(--color-positive);
}

.ico-negative {
    color: var(--color-negative);
}

.ico-warn {
    color: var(--color-warn);
}

.ico-on-deep {
    color: var(--color-ink-onDeep);
}

/* ─── Peso del tratto ────────────────────────────────────────────────────── */
/* Lucide disegna a stroke-width 2 su viewBox 24: il tratto scala già con la
   dimensione, questi servono solo per scelte deliberate di peso. */

.ico-thin {
    stroke-width: 1.5;
}

.ico-bold {
    stroke-width: 2.5;
}

/* ─── Stato ──────────────────────────────────────────────────────────────── */

.ico-spin {
    animation: ico-spin 0.9s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
    .ico-spin {
        animation: none;
    }
}