/* components/icon/icon.css — Icon (doc, Componentes > Icon). Se carga después de style.css. */
@layer ms.system, ms.theme, ms.attributes;

@layer ms.system {
  /* Icon: el dibujo del icono recorta el color del texto que lo rodea */
  .ms-icon {
    display: inline-block;
    flex: none;
    inline-size: var(--ms-iconSize_m);
    block-size: var(--ms-iconSize_m);
    vertical-align: middle;
    background-color: currentColor;
    mask-image: var(--ms-iconImage, linear-gradient(transparent, transparent));
    mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
    /* Colores forzados: el fondo no se reemplaza, así toma el color de texto del sistema */
    forced-color-adjust: none;
  }
  .ms-icon[data-ms-size="s"] { inline-size: var(--ms-iconSize_s); block-size: var(--ms-iconSize_s); }
  .ms-icon[data-ms-size="l"] { inline-size: var(--ms-iconSize_l); block-size: var(--ms-iconSize_l); }
  .ms-icon[data-ms-size="xl"] { inline-size: var(--ms-iconSize_xl); block-size: var(--ms-iconSize_xl); }
}