/*
  Wortic macOS UI Kit — Checkbox
  wm-checkbox — caixa física: superfície branca elevada com ring hairline,
  estado marcado em gradiente de accent com inner highlight e pop de
  spring na marcação.
*/

@layer components {
  .wm-checkbox {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--wm-space-5);
    cursor: pointer;
  }

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

  .wm-checkbox__box {
    --_shadow: 0 0 0 0.5px light-dark(rgba(0, 0, 0, 0.22), rgba(255, 255, 255, 0.22)),
      inset 0 1px 0 light-dark(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.07)),
      0 1px 1.5px light-dark(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.3));

    flex: none;
    width: 16px;
    height: 16px;
    border-radius: var(--wm-radius-xs);
    border: none;
    /* Superfície de controle (mesmo par de tokens do botão/select). */
    background: var(--wm-control-face-top);
    background: linear-gradient(180deg, var(--wm-control-face-top), var(--wm-control-face-bottom));
    box-shadow: var(--_shadow);
    /* Grid de uma célula: os DOIS glifos (check e minus) moram empilhados
       no centro, e o CSS mostra o que corresponde ao estado. Com um ícone
       só (markup legado), a célula única centraliza igual. */
    display: inline-grid;
    place-items: center;
    transition: background var(--wm-duration-fast) var(--wm-ease-standard),
      box-shadow var(--wm-duration-fast) var(--wm-ease-standard),
      transform var(--wm-duration-fast) var(--wm-ease-emphasized);
  }
  .wm-checkbox__box > .wm-icon {
    grid-area: 1 / 1;
  }

  .wm-checkbox:hover .wm-checkbox__box {
    --_shadow: 0 0 0 0.5px light-dark(rgba(0, 0, 0, 0.3), rgba(255, 255, 255, 0.3)),
      inset 0 1px 0 light-dark(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.09)),
      0 1px 2.5px light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.34));
  }

  .wm-checkbox:active .wm-checkbox__box {
    transform: scale(0.92);
  }

  .wm-checkbox__box .wm-icon {
    width: 11px;
    height: 11px;
    color: #ffffff;
    opacity: 0;
    transform: scale(0.5);
    transition: opacity var(--wm-duration-fast) var(--wm-ease-standard),
      transform var(--wm-duration-normal) var(--wm-ease-spring);
  }

  .wm-checkbox__input:checked + .wm-checkbox__box,
  .wm-checkbox__input:indeterminate + .wm-checkbox__box {
    background: var(--wm-accent);
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--wm-accent), #ffffff 16%),
      var(--wm-accent)
    );
    --_shadow: 0 0 0 0.5px color-mix(in srgb, var(--wm-accent), #000000 18%),
      inset 0 1px 0 rgba(255, 255, 255, 0.25),
      0 1px 2px color-mix(in srgb, var(--wm-accent) 35%, transparent);
  }
  .wm-checkbox__input:checked + .wm-checkbox__box .wm-icon,
  .wm-checkbox__input:indeterminate + .wm-checkbox__box .wm-icon {
    opacity: 1;
    transform: scale(1);
  }

  /* Dois glifos, um estado cada. O indeterminado é PROPRIEDADE do DOM
     (input.indeterminate), não atributo — e o clique do usuário a zera e
     marca o input. Com um único ícone estático no markup, esse clique
     deixava um MINUS dentro de uma caixa marcada. Com os dois glifos
     empilhados, o CSS esconde o que não corresponde:
       - marcado (e não indeterminado) -> só o check;
       - indeterminado -> só o minus, mesmo se checked=true por DOM.
     Markup legado com um ícone só continua valendo pela regra genérica
     acima. */
  .wm-checkbox__input:checked:not(:indeterminate) + .wm-checkbox__box .wm-checkbox__glyph--minus,
  .wm-checkbox__input:indeterminate + .wm-checkbox__box .wm-checkbox__glyph--check {
    opacity: 0;
    transform: scale(0.5);
  }

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

  /* Disabled trabalhado */
  .wm-checkbox__input:disabled + .wm-checkbox__box {
    background: var(--wm-fill-quaternary);
    --_shadow: 0 0 0 0.5px light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.08));
  }
  .wm-checkbox__input:disabled:checked + .wm-checkbox__box,
  .wm-checkbox__input:disabled:indeterminate + .wm-checkbox__box {
    background: color-mix(in srgb, var(--wm-accent) 40%, var(--wm-surface-primary));
  }
  .wm-checkbox:has(.wm-checkbox__input:disabled) {
    cursor: not-allowed;
  }
  .wm-checkbox:has(.wm-checkbox__input:disabled) .wm-checkbox__label {
    color: var(--wm-label-tertiary);
  }
  .wm-checkbox:has(.wm-checkbox__input:disabled) .wm-checkbox__box {
    transform: none;
  }

  .wm-checkbox__label {
    font-size: var(--wm-font-size-body);
    color: var(--wm-label-primary);
  }
  .wm-checkbox__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .wm-checkbox__desc {
    display: block;
    font-size: var(--wm-font-size-subheadline);
    color: var(--wm-label-secondary);
    margin-block-start: 1px;
  }

  /* Com descrição, a caixa alinha à PRIMEIRA linha, não ao centro do
     bloco — senão ela flutua no meio de duas linhas de texto. O nudge de
     2px casa a caixa com a linha de base do rótulo (era inline style nas
     páginas de demonstração; agora é comportamento do componente). */
  .wm-checkbox:has(.wm-checkbox__desc) {
    align-items: flex-start;
  }
  .wm-checkbox:has(.wm-checkbox__desc) .wm-checkbox__box {
    margin-block-start: var(--wm-space-1);
  }

  .wm-checkbox-group {
    display: flex;
    flex-direction: column;
    gap: var(--wm-space-6);
  }

  @media (prefers-reduced-motion: reduce) {
    .wm-checkbox__box,
    .wm-checkbox__box .wm-icon {
      transition: none;
    }
    .wm-checkbox:active .wm-checkbox__box {
      transform: none;
    }
  }
}