/* components/button/button.css — Button (doc, Componentes > Button). 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-buttonRadius: var(--ms-radiusRole_action);
    --ms-buttonBorderWidth: var(--ms-strokeRole_outline);
    --ms-buttonTextStyle_s_family: var(--ms-textStyle_labelS_family);
    --ms-buttonTextStyle_s_size: var(--ms-textStyle_labelS_size);
    --ms-buttonTextStyle_s_lineHeight: var(--ms-textStyle_labelS_lineHeight);
    --ms-buttonTextStyle_s_weight: var(--ms-textStyle_labelS_weight);
    --ms-buttonTextStyle_m_family: var(--ms-textStyle_labelM_family);
    --ms-buttonTextStyle_m_size: var(--ms-textStyle_labelM_size);
    --ms-buttonTextStyle_m_lineHeight: var(--ms-textStyle_labelM_lineHeight);
    --ms-buttonTextStyle_m_weight: var(--ms-textStyle_labelM_weight);
    --ms-buttonTextStyle_l_family: var(--ms-textStyle_labelL_family);
    --ms-buttonTextStyle_l_size: var(--ms-textStyle_labelL_size);
    --ms-buttonTextStyle_l_lineHeight: var(--ms-textStyle_labelL_lineHeight);
    --ms-buttonTextStyle_l_weight: var(--ms-textStyle_labelL_weight);
    --_ms-buttonPaddingX_s: var(--ms-spacing_12);
    --_ms-buttonPaddingX_m: var(--ms-spacing_16);
    --_ms-buttonPaddingX_l: var(--ms-spacing_24);
    --_ms-buttonPaddingY_s: var(--ms-spacing_4);
    --_ms-buttonPaddingY_m: var(--ms-spacing_8);
    --_ms-buttonPaddingY_l: var(--ms-spacing_12);
  }

  /* Button */
  :where(.ms-button) { border-color: transparent; }
  .ms-button {
    position: relative;
    isolation: isolate;
    box-sizing: border-box;
    min-block-size: var(--_ms-controlHeight_m);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ms-spacing_8);
    margin: 0;
    border-width: var(--ms-buttonBorderWidth);
    border-style: solid;
    /* El borde de Button es transparente, salvo que su variante lo pinte (outline) */
    border-radius: var(--ms-buttonRadius);
    padding: var(--_ms-buttonPaddingY_m) var(--_ms-buttonPaddingX_m);
    /* La capa de estado cubre también el borde */
    --_ms-actionInset: calc(-1 * var(--ms-buttonBorderWidth));
    font-family: var(--ms-buttonTextStyle_m_family); font-size: var(--ms-buttonTextStyle_m_size); line-height: var(--ms-buttonTextStyle_m_lineHeight); font-weight: var(--ms-buttonTextStyle_m_weight);
    text-decoration: none;
    cursor: pointer;
  }
  .ms-button[data-ms-size="s"] { min-block-size: auto; padding: var(--_ms-buttonPaddingY_s) var(--_ms-buttonPaddingX_s); font-family: var(--ms-buttonTextStyle_s_family); font-size: var(--ms-buttonTextStyle_s_size); line-height: var(--ms-buttonTextStyle_s_lineHeight); font-weight: var(--ms-buttonTextStyle_s_weight); }
  .ms-button[data-ms-size="l"] { padding: var(--_ms-buttonPaddingY_l) var(--_ms-buttonPaddingX_l); font-family: var(--ms-buttonTextStyle_l_family); font-size: var(--ms-buttonTextStyle_l_size); line-height: var(--ms-buttonTextStyle_l_lineHeight); font-weight: var(--ms-buttonTextStyle_l_weight); }
  /* Color, capa de estado, estados y deshabilitado: los de su variante de action
     (sección 11, Interactions). Sin data-ms-action, un Button es filled. */
}