/*
  Wortic macOS UI Kit — Radio
  wm-radio — mesmo idioma físico do checkbox: dot branco elevado com ring
  hairline, marcado em gradiente de accent e pop de spring no ponto interno.
*/

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

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

  .wm-radio__dot {
    --_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: 50%;
    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);
    display: inline-flex;
    align-items: center;
    justify-content: 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-radio:hover .wm-radio__dot {
    --_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-radio:active .wm-radio__dot {
    transform: scale(0.92);
  }

  .wm-radio__dot::after {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    /* Token, não hex: este ponto só aparece sobre o accent, e é exatamente
       para isso que --wm-label-on-accent existe. Com hex cru, um tema de
       cliente com accent claro ficaria com ponto branco sobre fundo claro. */
    background: var(--wm-label-on-accent);
    box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.25);
    opacity: 0;
    transform: scale(0.3);
    transition: opacity var(--wm-duration-fast) var(--wm-ease-standard),
      transform var(--wm-duration-normal) var(--wm-ease-spring);
  }

  .wm-radio__input:checked + .wm-radio__dot {
    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-radio__input:checked + .wm-radio__dot::after {
    opacity: 1;
    transform: scale(1);
  }

  .wm-radio__input:focus-visible + .wm-radio__dot {
    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-radio__input:disabled + .wm-radio__dot {
    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-radio__input:disabled:checked + .wm-radio__dot {
    background: color-mix(in srgb, var(--wm-accent) 40%, var(--wm-surface-primary));
  }
  .wm-radio:has(.wm-radio__input:disabled) {
    cursor: not-allowed;
  }
  /* CONTRASTE do rótulo desabilitado (medido no Chromium, 08/08/2026).
     Com --wm-label-tertiary o rótulo dava 2.52:1 no claro e 3.45:1 no escuro
     em texto de 13px — reprovado nos dois. E é justamente a opção que a
     pessoa NÃO pode escolher que ela mais precisa ler, para entender por quê
     ("Corporativo — fale com o comercial"). Secundário desbota o suficiente
     para dizer "indisponível" e continua legível. */
  .wm-radio:has(.wm-radio__input:disabled) .wm-radio__label {
    color: var(--wm-label-secondary);
  }
  .wm-radio:has(.wm-radio__input:disabled) .wm-radio__dot {
    transform: none;
  }

  .wm-radio__label {
    font-size: var(--wm-font-size-body);
    color: var(--wm-label-primary);
  }

  /* A LEGENDA precisa de margem própria.
     <legend> não participa do flex do <fieldset> — o Chromium o desenha como
     caixa especial —, então o `gap` do grupo não vale para ele e a pergunta
     ficava colada na primeira opção. Visto no print com legenda visível. */
  .wm-radio-group > legend {
    float: none;
    padding: 0;
    margin-bottom: var(--wm-space-6);
    font-size: var(--wm-font-size-subheadline);
    font-weight: var(--wm-font-weight-medium);
    letter-spacing: var(--wm-letter-spacing-tight);
    color: var(--wm-label-primary);
  }

  .wm-radio-group {
    display: flex;
    flex-direction: column;
    gap: var(--wm-space-6);
  }
  .wm-radio-group--horizontal {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--wm-space-8);
  }

  /* A frase de apoio do GRUPO (não de uma opção).
     Existe aqui, e não emprestada do text-field, para o componente continuar
     inteiro quando a página importa só radio.css — dependência escondida de
     CSS é o tipo de coisa que só aparece na tela do cliente. */
  .wm-radio-group__help {
    font-size: var(--wm-font-size-caption);
    color: var(--wm-label-secondary);
    line-height: var(--wm-line-height-normal);
    margin-top: var(--wm-space-4);
  }

  @media (prefers-reduced-motion: reduce) {
    .wm-radio__dot,
    .wm-radio__dot::after {
      transition: none;
    }
    .wm-radio:active .wm-radio__dot {
      transform: none;
    }
  }
}