/**
 * AMH Icons — CSS base
 *
 * Stili minimi per le icone SVG inline.
 * Le icone ereditano colore e dimensione dal contesto via currentColor e font-size.
 *
 * @package  Impera Core / Animah
 * @version  1.0.0
 */

/* ── Reset e base ─────────────────────────────────────────────────────────── */

.amh-icon {
    display:        inline-block;
    vertical-align: middle;
    flex-shrink:    0;
    line-height:    1;
    stroke:         currentColor;
    fill:           none;
}

/* Blocca fill esterni dal tema su tutti i children */
.amh-icon *:not([style*="fill:currentColor"]) {
    fill: none !important;
}

/* Eccezione: icone filled intenzionali */
.amh-icon--filled,
.amh-icon--filled * {
    fill: currentColor !important;
    stroke: none !important;
}

/* Allineamento dentro flex/grid */
.amh-icon + * ,
* + .amh-icon {
    vertical-align: middle;
}

/* ── Dimensioni predefinite ───────────────────────────────────────────────── */

.amh-icon--xs { width: 14px; height: 14px; }
.amh-icon--sm { width: 18px; height: 18px; }
.amh-icon--md { width: 24px; height: 24px; } /* default */
.amh-icon--lg { width: 32px; height: 32px; }
.amh-icon--xl { width: 48px; height: 48px; }

/* ── Colori utility ───────────────────────────────────────────────────────── */

.amh-icon--accent  { stroke: var(--amh-color-accent,  currentColor); }
.amh-icon--muted   { stroke: var(--amh-color-muted,   currentColor); opacity: 0.5; }
.amh-icon--c-white   { stroke: #ffffff; }
.amh-icon--c-black   { stroke: #000000; }
.amh-icon--c-success { stroke: #22c55e; }
.amh-icon--c-warning { stroke: #f59e0b; }
.amh-icon--c-danger  { stroke: #ef4444; }
.amh-icon--c-info    { stroke: #38bdf8; }

/* ── Transizione hover (opzionale — aggiungere .amh-icon--hover) ─────────── */

.amh-icon--hover {
    transition: stroke 0.2s ease, opacity 0.2s ease;
}

.amh-icon--hover:hover {
    opacity: 0.7;
}

/* ── Spinner animato (icona: refresh) ─────────────────────────────────────── */

.amh-icon--spin {
    animation: amh-spin 1s linear infinite;
}

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

/* ── Draw on hover — il tratto si disegna all'hover ──────────────────────── */

.amh-icon--draw *,
.amh-icon--draw * {
    stroke-dasharray: 100;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 0s;
}

.amh-icon--draw:hover *,
*:hover > .amh-icon--draw *,
.amh-draw:hover .amh-icon * {
    stroke-dashoffset: 100;
    animation: amh-draw 0.6s ease forwards;
}

@keyframes amh-draw {
    from { stroke-dashoffset: 100; }
    to   { stroke-dashoffset: 0; }
}

/* Versione con stagger — ogni elemento si disegna con un leggero ritardo */
.amh-icon--draw:hover *:nth-child(1) { animation-delay: 0s; }
.amh-icon--draw:hover *:nth-child(2) { animation-delay: 0.05s; }
.amh-icon--draw:hover *:nth-child(3) { animation-delay: 0.1s; }
.amh-icon--draw:hover *:nth-child(4) { animation-delay: 0.15s; }
.amh-icon--draw:hover *:nth-child(5) { animation-delay: 0.2s; }
.amh-icon--draw:hover *:nth-child(6) { animation-delay: 0.25s; }
.amh-icon--draw:hover *:nth-child(7) { animation-delay: 0.3s; }
.amh-icon--draw:hover *:nth-child(8) { animation-delay: 0.35s; }

/* ── Filled: override per icone che usano fill (play, star, heart) ────────── */

.amh-icon--filled {
    fill: currentColor;
    stroke: none;
}

/* ── Icone nei menu nav ────────────────────────────────────────────────────── */

.amh-nav-label .amh-icon,
.amh-nav-track span .amh-icon,
.amh-sub-link .amh-icon {
    vertical-align: middle;
    margin-right: 6px;
    flex-shrink: 0;
}

/* Icona dopo il testo */
.amh-nav-label .amh-icon:last-child,
.amh-nav-track span .amh-icon:last-child {
    margin-right: 0;
    margin-left: 6px;
}

/* Solo icona — testo visibile solo agli screen reader */
.amh-nav-label-sr {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}