/* components/switch/switch.css — Switch (doc, Componentes > Switch). 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-switchWidth: var(--ms-spacing_48);
    --_ms-switchHeight: var(--ms-spacing_28);
    --_ms-switchThumbSize: var(--ms-spacing_16);
    --_ms-switchThumbSizeOn: var(--ms-spacing_20);
    --ms-switchBorderWidth: var(--ms-strokeRole_selection);
  }

  label:has(> .ms-switch) {
    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-switch:disabled) { cursor: not-allowed; opacity: var(--ms-opacityRole_disabled); }
  .ms-switch {
    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-switch:disabled { box-shadow: none; cursor: not-allowed; }
  /* Error */
  .ms-switch[aria-invalid="true"], .ms-field[data-ms-scheme="error"] .ms-switch { border-color: var(--ms-color_mainContent); }

  .ms-switch {
    display: inline-block;
    inline-size: var(--_ms-switchWidth);
    block-size: var(--_ms-switchHeight);
    border: var(--ms-switchBorderWidth) solid var(--ms-color_content);
    border-radius: var(--ms-radius_full);
  }
  .ms-switch::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: calc((var(--_ms-switchHeight) - 2 * var(--ms-switchBorderWidth) - var(--_ms-switchThumbSize)) / 2);
    inline-size: var(--_ms-switchThumbSize);
    block-size: var(--_ms-switchThumbSize);
    translate: 0 -50%;
    border-radius: var(--ms-radius_full);
    background: var(--_ms-toggleMark);
    transition: inset-inline-start var(--ms-motionDuration_fast) var(--ms-motionBezier_easeOut), inline-size var(--ms-motionDuration_fast) var(--ms-motionBezier_easeOut), block-size var(--ms-motionDuration_fast) var(--ms-motionBezier_easeOut), background-color var(--ms-motionDuration_fast) var(--ms-motionBezier_ease);
  }
  .ms-switch:checked::after {
    inset-inline-start: calc(var(--_ms-switchWidth) - 2 * var(--ms-switchBorderWidth) - var(--_ms-switchThumbSizeOn) - (var(--_ms-switchHeight) - 2 * var(--ms-switchBorderWidth) - var(--_ms-switchThumbSizeOn)) / 2);
    inline-size: var(--_ms-switchThumbSizeOn);
    block-size: var(--_ms-switchThumbSizeOn);
  }
  @media (prefers-reduced-motion: reduce) {
    .ms-switch, .ms-switch::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. */
  /* switchAction: toggle */
  .ms-switch { background-color: transparent; border-color: var(--ms-color_content); --_ms-toggleMark: var(--ms-color_content); }
  .ms-switch: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-switch: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-switch:is([aria-selected="true"], [aria-current]:not([aria-current="false"], [aria-current="date"]), [aria-pressed="true"], [aria-checked="true"], :checked, :indeterminate) { background-color: var(--ms-color_main); border-color: var(--ms-color_main); --_ms-toggleMark: var(--ms-color_onMain); }
  /* @end interactions:component */
}