/* components/mode-switcher/mode-switcher.css — Mode Switcher (doc, Componentes > Mode Switcher). Se carga después de style.css. */
@layer ms.system, ms.theme, ms.attributes;

@layer ms.system {
  /* Mode Switcher: Switch con el sol o la luna en el thumb */
  ms-mode-switcher { display: inline-flex; align-items: center; }
  /* Excepción: Switch no usa capa de estado (su estado es el halo), así que el icono
     va en ::before, encima del thumb (::after). */
  ms-mode-switcher .ms-switch::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset-block-start: 50%;
    inset-inline-start: calc((var(--_ms-switchHeight) - 2 * var(--ms-switchBorderWidth) - var(--ms-iconSize_s)) / 2);
    inline-size: var(--ms-iconSize_s);
    block-size: var(--ms-iconSize_s);
    translate: 0 -50%;
    color: var(--ms-color_canvas);
    background-color: currentColor; mask-image: var(--ms-icon_lightMode); mask-size: contain; mask-position: center; mask-repeat: no-repeat; forced-color-adjust: none;
    transition: inset-inline-start var(--ms-motionDuration_fast) var(--ms-motionBezier_easeOut);
  }
  ms-mode-switcher .ms-switch::after { inline-size: var(--_ms-switchThumbSizeOn); block-size: var(--_ms-switchThumbSizeOn); inset-inline-start: calc((var(--_ms-switchHeight) - 2 * var(--ms-switchBorderWidth) - var(--_ms-switchThumbSizeOn)) / 2); }
  ms-mode-switcher .ms-switch:checked::before {
    inset-inline-start: calc(var(--_ms-switchWidth) - 2 * var(--ms-switchBorderWidth) - var(--ms-iconSize_s) - (var(--_ms-switchHeight) - 2 * var(--ms-switchBorderWidth) - var(--ms-iconSize_s)) / 2);
    color: var(--ms-color_main);
    mask-image: var(--ms-icon_darkMode);
  }
  @media (prefers-reduced-motion: reduce) { ms-mode-switcher .ms-switch::before { transition: none; } }
}