/* AeB icon system — base styles para SVG sprite Lucide.
   Markup gerado pelo helper \Aeb\Icons::render() (includes/icon.php).

   Uso típico:
     <?= icon('Publicar') ?>                          (20px, aria-label="Publicar")
     <?= icon('Apagar', ['class' => 'icon--danger']) ?>
     <?= icon('Loader', ['class' => 'icon--spin']) ?>
*/

.icon {
    display: inline-block;
    vertical-align: -0.15em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
    pointer-events: none;
}

/* Tamanhos canónicos (default 20px via attr width/height no SVG;
   estas classes opcionais permitem override sem inline style). */
.icon--xs { width: 14px; height: 14px; stroke-width: 2; }
.icon--sm { width: 16px; height: 16px; stroke-width: 1.75; }
.icon--md { width: 20px; height: 20px; }
.icon--lg { width: 24px; height: 24px; }
.icon--xl { width: 32px; height: 32px; stroke-width: 1.25; }

/* Variantes semânticas — cor herdada via currentColor.
   Se o template já força cor no contexto, omitir; estas classes são
   úteis para badges/buttons sem cor herdada. */
.icon--danger  { color: var(--red, #c0392b); }
.icon--ok      { color: var(--green, #2e7d32); }
.icon--warn    { color: var(--amber, #c08020); }
.icon--info    { color: var(--blue, #2b5d8c); }
.icon--muted   { color: var(--muted, #6b665c); }
.icon--accent  { color: var(--accent, #6b4a2e); }
.icon--inverse { color: var(--paper, #fbf7ee); }

/* Stroke variantes (override do default 1.5) */
.icon--bold { stroke-width: 2; }
.icon--thin { stroke-width: 1; }

/* Animações */
.icon--spin { animation: icon-spin 1s linear infinite; }
@keyframes icon-spin {
    from { transform: rotate(0); }
    to   { transform: rotate(360deg); }
}

.icon--pulse { animation: icon-pulse 2s ease-in-out infinite; }
@keyframes icon-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.45; }
}

/* Utility: ícone em botão com label textual à direita */
.btn .icon,
button .icon {
    margin-right: 0.4em;
}
.btn .icon:last-child,
button .icon:last-child {
    margin-right: 0;
    margin-left: 0.4em;
}

/* Reduce motion — honrar preferência do utilizador */
@media (prefers-reduced-motion: reduce) {
    .icon--spin,
    .icon--pulse {
        animation: none;
    }
}