/* components/atoms/icon.css — átomo Icon (A01).
 *
 * O <svg> usa stroke="currentColor", então o componente herda a cor do pai
 * via `color`. Para forçar uma cor, defina `style.color` (Icon faz isso quando
 * a prop `color` é setada).
 *
 * O size é aplicado inline via attributes width/height — não há regra CSS aqui
 * para isso (evita conflito com style attribute do consumidor).
 */

.cmp-icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  pointer-events: none; /* clicks passam para o pai (ex.: IconButton) */
}

/* Variante "spin" — usado em refresh/loading. Aplica com className="cmp-icon--spin". */
.cmp-icon--spin {
  animation: cmp-icon-spin 1s linear infinite;
}

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