/*
  Wortic macOS UI Kit — Toggle (Switch)
  wm-toggle — switch físico: track côncavo (inset), estado on em gradiente
  de accent, thumb com sombra realista em camadas que alarga no pressed.
*/

@layer components {
  .wm-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: none;
  }

  .wm-toggle__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    margin: 0;
  }

  .wm-toggle__track {
    --_track-shadow: inset 0 0 0 0.5px light-dark(rgba(0, 0, 0, 0.07), rgba(255, 255, 255, 0.07)),
      inset 0 1px 2px light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.4));

    display: inline-flex;
    align-items: center;
    width: 38px;
    height: 22px;
    border-radius: var(--wm-radius-pill);
    /* fallback para engines sem light-dark() */
    background: var(--wm-fill-primary);
    background: linear-gradient(
      180deg,
      light-dark(rgba(0, 0, 0, 0.13), rgba(255, 255, 255, 0.08)),
      light-dark(rgba(0, 0, 0, 0.09), rgba(255, 255, 255, 0.12))
    );
    box-shadow: var(--_track-shadow);
    padding: 2px;
    box-sizing: border-box;
    cursor: pointer;
    transition: background var(--wm-duration-normal) var(--wm-ease-standard),
      box-shadow var(--wm-duration-normal) var(--wm-ease-standard);
  }

  /* 18px em track de 22 com padding 2 => folga de 2px UNIFORME nos 4 lados */
  .wm-toggle__thumb {
    width: 18px;
    height: 18px;
    border-radius: var(--wm-radius-pill);
    background: #ffffff;
    background: linear-gradient(180deg, var(--wm-control-thumb-top), var(--wm-control-thumb-bottom));
    box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.06),
      0 1px 2px rgba(0, 0, 0, 0.24),
      0 2px 6px -1px rgba(0, 0, 0, 0.14);
    transform: translateX(0);
    transition: transform var(--wm-duration-normal) var(--wm-ease-spring),
      width var(--wm-duration-fast) var(--wm-ease-emphasized);
  }

  .wm-toggle__input:checked + .wm-toggle__track {
    background: var(--wm-accent);
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--wm-accent), #ffffff 16%),
      var(--wm-accent)
    );
    --_track-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--wm-accent), #000000 16%),
      inset 0 1px 2px color-mix(in srgb, var(--wm-accent), #000000 22%);
  }
  .wm-toggle__input:checked + .wm-toggle__track .wm-toggle__thumb {
    transform: translateX(16px);
  }

  /* Pressed: o thumb alarga como no macOS; do lado checked ele "ancora" à direita */
  .wm-toggle__input:active:not(:disabled) + .wm-toggle__track .wm-toggle__thumb {
    width: 22px;
  }
  .wm-toggle__input:active:not(:disabled):checked + .wm-toggle__track .wm-toggle__thumb {
    transform: translateX(12px);
  }

  .wm-toggle__input:focus-visible + .wm-toggle__track {
    outline: 2px solid var(--wm-accent);
    outline-offset: var(--wm-focus-ring-offset);
    box-shadow: var(--_track-shadow), 0 0 0 var(--wm-focus-halo-width) var(--wm-accent-fill);
  }

  /* Disabled trabalhado: superfície lavada, sem opacity genérica */
  .wm-toggle__input:disabled + .wm-toggle__track {
    cursor: not-allowed;
    background: var(--wm-fill-tertiary);
    --_track-shadow: inset 0 0 0 0.5px light-dark(rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.05));
  }
  .wm-toggle__input:disabled + .wm-toggle__track .wm-toggle__thumb {
    background: var(--wm-control-thumb-disabled);
    box-shadow: 0 0 0 0.5px light-dark(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.2)),
      0 1px 1.5px rgba(0, 0, 0, 0.1);
  }
  .wm-toggle__input:disabled:checked + .wm-toggle__track {
    background: color-mix(in srgb, var(--wm-accent) 42%, var(--wm-surface-primary));
  }

  /* Sizes */
  .wm-toggle--small .wm-toggle__track {
    width: 30px;
    height: 18px;
  }
  .wm-toggle--small .wm-toggle__thumb {
    width: 14px;
    height: 14px;
  }
  .wm-toggle--small .wm-toggle__input:checked + .wm-toggle__track .wm-toggle__thumb {
    transform: translateX(12px);
  }
  .wm-toggle--small .wm-toggle__input:active:not(:disabled) + .wm-toggle__track .wm-toggle__thumb {
    width: 16px;
  }
  .wm-toggle--small
    .wm-toggle__input:active:not(:disabled):checked
    + .wm-toggle__track
    .wm-toggle__thumb {
    transform: translateX(10px);
  }

  /* Label pairing */
  .wm-toggle-field {
    display: inline-flex;
    align-items: center;
    gap: var(--wm-space-5);
  }
  .wm-toggle-field__label {
    font-size: var(--wm-font-size-body);
    color: var(--wm-label-primary);
  }
  .wm-toggle-field:has(.wm-toggle__input:disabled) .wm-toggle-field__label {
    color: var(--wm-label-tertiary);
  }

  @media (prefers-reduced-motion: reduce) {
    .wm-toggle__track,
    .wm-toggle__thumb {
      transition: none;
    }
  }
}