/* components/radio-button/radio-button.css — Radio Button (doc, Componentes > Radio 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-radioSize: var(--ms-spacing_20);
    --ms-radioBorderWidth: var(--ms-strokeRole_selection);
    --_ms-radioDotSize: var(--ms-spacing_8);
  }

  label:has(> .ms-radio) {
    font: inherit;   /* el texto de una opción sigue al que la rodea, no al resguardo de <label> */
    display: inline-flex;
    align-items: center;
    gap: var(--ms-spacing_12);
    color: var(--ms-color_content);
    cursor: pointer;
  }
  label:has(> .ms-radio:disabled) { cursor: not-allowed; opacity: var(--ms-opacityRole_disabled); }
  .ms-radio {
    appearance: none;
    position: relative;
    display: inline-grid;
    place-content: center;
    flex: none;
    box-sizing: border-box;
    margin: 0;
    background: transparent;
    cursor: pointer;
    transition: background-color var(--ms-motionDuration_fast) var(--ms-motionBezier_ease), border-color var(--ms-motionDuration_fast) var(--ms-motionBezier_ease), box-shadow var(--ms-motionDuration_fast) var(--ms-motionBezier_ease);
  }
  .ms-radio:disabled { box-shadow: none; cursor: not-allowed; }
  /* Error */
  .ms-radio[aria-invalid="true"], .ms-field[data-ms-scheme="error"] .ms-radio { border-color: var(--ms-color_mainContent); }

  .ms-radio {
    inline-size: var(--_ms-radioSize);
    block-size: var(--_ms-radioSize);
    border: var(--ms-radioBorderWidth) solid var(--ms-color_content);
    border-radius: var(--ms-radius_full);
  }
  .ms-radio::after {
    content: "";
    inline-size: var(--_ms-radioDotSize);
    block-size: var(--_ms-radioDotSize);
    border-radius: var(--ms-radius_full);
    background: var(--_ms-choiceMark);
    scale: 0;
    transition: scale var(--ms-motionDuration_fast) var(--ms-motionBezier_easeOut);
  }
  .ms-radio:checked::after { scale: 1; }

  @media (prefers-reduced-motion: reduce) {
    .ms-radio, .ms-radio::after { transition: none; }
  }

  /* Interactions (doc, Interactions > Alias de componente): su variante de action por defecto, después de su estilo */
  /* @generated interactions:component — node designSystem/interactions.js. No se edita a mano. */
  /* radioAction: choice */
  .ms-radio { border-color: var(--ms-color_content); --_ms-choiceMark: var(--ms-color_mainContent); }
  .ms-radio:is(:hover, [data-ms-active]):not(:disabled, [aria-disabled="true"], [aria-selected="true"], [aria-current]:not([aria-current="false"], [aria-current="date"]), [aria-pressed="true"], [aria-checked="true"], :checked, :indeterminate) { box-shadow: 0 0 0 var(--_ms-controlHaloSize) var(--ms-color_mantle); }
  .ms-radio:active:not(:disabled, [aria-disabled="true"], [aria-selected="true"], [aria-current]:not([aria-current="false"], [aria-current="date"]), [aria-pressed="true"], [aria-checked="true"], :checked, :indeterminate) { box-shadow: 0 0 0 var(--_ms-controlHaloSize) var(--ms-color_surface); }
  .ms-radio:is([aria-selected="true"], [aria-current]:not([aria-current="false"], [aria-current="date"]), [aria-pressed="true"], [aria-checked="true"], :checked, :indeterminate) { border-color: var(--ms-color_mainContent); }
  /* @end interactions:component */
}