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

@layer ms.system {
  /* Alias: valor por defecto; un Tema lo cambia en ms.theme */
  :root {
    --ms-badgeRadius: var(--ms-radiusRole_indicator);
    --ms-badgeBorderWidth: var(--ms-strokeRole_outline);
    --ms-badgeTextStyle_family: var(--ms-textStyle_labelS_family);
    --ms-badgeTextStyle_size: var(--ms-textStyle_labelS_size);
    --ms-badgeTextStyle_lineHeight: var(--ms-textStyle_labelS_lineHeight);
    --ms-badgeTextStyle_weight: var(--ms-textStyle_labelS_weight);
    --_ms-badgePaddingX: var(--ms-spacing_8);
    --_ms-badgePaddingY: var(--ms-spacing_2);
    --_ms-badgeGap: var(--ms-spacing_4);
  }

  /* Badge */
  .ms-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--_ms-badgeGap);
    border: var(--ms-badgeBorderWidth) solid transparent;
    border-radius: var(--ms-badgeRadius);
    padding: var(--_ms-badgePaddingY) var(--_ms-badgePaddingX);
    font-family: var(--ms-badgeTextStyle_family); font-size: var(--ms-badgeTextStyle_size); line-height: var(--ms-badgeTextStyle_lineHeight); font-weight: var(--ms-badgeTextStyle_weight);
    background: var(--ms-color_main);
    color: var(--ms-color_onMain);
  }
  /* Variantes: las de Button (filled, surface, ghost, content, outline, floating), con sus
     colores en enabled. Un Badge no es accionable: no tiene estados. */
  .ms-badge[data-ms-variant="surface"] { background: var(--ms-color_surface); color: var(--ms-color_onSurface); }
  .ms-badge[data-ms-variant="ghost"] { background: transparent; color: var(--ms-color_mainContent); }
  .ms-badge[data-ms-variant="content"] { background: transparent; color: var(--ms-color_content); }
  .ms-badge[data-ms-variant="outline"] { background: transparent; color: var(--ms-color_mainContent); border-color: var(--ms-color_mainContent); }
  .ms-badge[data-ms-variant="floating"] {
    --_ms-shadowColor: color-mix(in oklab, color-mix(in oklab, var(--ms-effectShadowColor_neutral), var(--ms-effectShadowColor_color) calc(var(--ms-actionFloatingShadow_color) * 100%)), var(--ms-effectNeonColor_color) calc(var(--ms-actionFloatingShadow_neon) * 100%));
    box-shadow: var(--ms-actionFloatingShadow_near) var(--_ms-shadowColor), var(--ms-actionFloatingShadow_far) var(--_ms-shadowColor);
  }
}