/*
  Wortic macOS UI Kit — Badge
  wm-badge — contador/rótulo curto. Cobre Badge, Count Badge,
  Notification Badge, Status Badge, Pill, Tag, Chip (via modifiers).

  Glowup 2026: pílulas refinadas — anel hairline interno na cor do
  texto (define a borda sem parecer etiqueta dura), gradiente sutil
  no accent com brilho superior, tags com hover tátil.
*/

@layer components {
  .wm-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding-inline: var(--wm-space-3);
    border-radius: var(--wm-radius-pill);
    background: var(--wm-fill-primary);
    color: var(--wm-label-secondary);
    font-size: 11px;
    font-weight: var(--wm-font-weight-semibold);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
    line-height: 1;
    flex: none;
    /* Anel interno de 0.5px na cor do texto — contorna a pílula
       sem criar borda cinza dura. */
    box-shadow: inset 0 0 0 var(--wm-border-width-hairline)
      color-mix(in srgb, currentColor 16%, transparent);
  }

  .wm-badge--accent {
    background: linear-gradient(
      180deg,
      var(--wm-accent-hover) 0%,
      var(--wm-accent) 100%
    );
    color: var(--wm-label-on-accent);
    box-shadow:
      inset 0 0.5px 0 rgba(255, 255, 255, 0.28),
      0 0.5px 1.5px color-mix(in srgb, var(--wm-accent) 40%, transparent);
  }
  .wm-badge--neutral {
    background: var(--wm-fill-secondary);
    color: var(--wm-label-secondary);
  }
  .wm-badge--success {
    background: var(--wm-success-fill);
    color: var(--wm-success);
  }
  .wm-badge--warning {
    background: var(--wm-warning-fill);
    color: var(--wm-warning);
  }
  .wm-badge--error {
    background: var(--wm-error-fill);
    color: var(--wm-error);
  }

  /* O ponto: pílula sem conteúdo, só presença.

     A cor sai de --_wm-badge-dot e não do fundo do tom. Os tons pintam
     a pílula com --wm-*-fill, um véu pálido que existe para receber
     TEXTO por cima; num disco de 8px sem texto, esse véu simplesmente
     some. Pior: como .wm-badge--dot vem depois dos tons no arquivo e
     fixava background: var(--wm-accent), `wm-badge--dot wm-badge--error`
     saía AZUL. Estava no print — três pontos idênticos onde deviam
     estar verde, âmbar e vermelho. Nenhum checador pega isso: as duas
     classes existem. */
  .wm-badge--dot {
    --_wm-badge-dot: var(--wm-accent);
    min-width: 8px;
    width: 8px;
    height: 8px;
    padding: 0;
    background: var(--_wm-badge-dot);
    box-shadow: 0 0.5px 1.5px color-mix(in srgb, var(--_wm-badge-dot) 45%, transparent);
  }
  .wm-badge--dot.wm-badge--success { --_wm-badge-dot: var(--wm-success-solid); }
  .wm-badge--dot.wm-badge--warning { --_wm-badge-dot: var(--wm-warning-solid); }
  .wm-badge--dot.wm-badge--error   { --_wm-badge-dot: var(--wm-error-solid); }
  .wm-badge--dot.wm-badge--neutral { --_wm-badge-dot: var(--wm-label-tertiary); }

  /* Tag / Chip — texto com fundo suave, geralmente removível */
  .wm-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--wm-space-2);
    height: 22px;
    padding-inline: var(--wm-space-4);
    border-radius: var(--wm-radius-pill);
    background: var(--wm-fill-secondary);
    color: var(--wm-label-primary);
    font-size: var(--wm-font-size-subheadline);
    font-weight: var(--wm-font-weight-medium);
    box-shadow: inset 0 0 0 var(--wm-border-width-hairline)
      color-mix(in srgb, currentColor 8%, transparent);
    transition: background var(--wm-duration-fast) var(--wm-ease-standard);
  }
  .wm-tag:hover {
    background: var(--wm-fill-primary);
  }
  /* --wm-accent-text, e não --wm-accent: no escuro o accent do produto
     (#1d59f0) sobre --wm-accent-fill media 2.27:1 num texto de 11px —
     reprovado com folga. --wm-accent-text existe exatamente para isto
     e vira #83a4f7 no tema escuro. Medido, não estimado. */
  .wm-tag--accent {
    background: var(--wm-accent-fill);
    color: var(--wm-accent-text);
    box-shadow: inset 0 0 0 var(--wm-border-width-hairline)
      color-mix(in srgb, currentColor 18%, transparent);
  }
  /* O hover engrossa o ANEL, não o véu. Com --wm-accent-fill-strong no
     fundo, o texto de 11px caía de 4.71:1 para 4.03:1 no tema claro —
     abaixo do mínimo. O retorno tátil continua existindo, só que pela
     borda, e o contraste fica igual ao do repouso. */
  .wm-tag--accent:hover {
    box-shadow: inset 0 0 0 calc(var(--wm-border-width-hairline) * 3)
      color-mix(in srgb, currentColor 34%, transparent);
  }
  /* O × precisa de CAIXA. Sem largura e altura próprias o botão colapsa
     no tamanho do glifo de 12px: o halo de hover virava uma bolinha
     torta e o anel de :focus-visible da fundação encostava na letra ao
     lado. 16px dentro de uma pílula de 22px deixa folga em cima e
     embaixo e ainda dá alvo de mouse. */
  .wm-tag__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--wm-icon-md);
    block-size: var(--wm-icon-md);
    flex: none;
    color: inherit;
    opacity: 0.55;
    border-radius: 50%;
    margin-inline-end: calc(-1 * var(--wm-space-1));
    transition:
      opacity var(--wm-duration-fast) var(--wm-ease-standard),
      background var(--wm-duration-fast) var(--wm-ease-standard);
  }
  .wm-tag__remove:hover {
    opacity: 1;
    background: color-mix(in srgb, currentColor 12%, transparent);
  }
  .wm-tag__remove:active {
    transform: scale(var(--wm-scale-pressed-sm));
  }

  /* Notification badge (posicionamento absoluto sobre um ícone) */
  .wm-notification-badge {
    position: relative;
    display: inline-flex;
  }
  /* O selo é ancorado pelo CENTRO na quina do ícone, não pelo canto.
     Com top/right negativos fixos, um "5" ficava discreto e um "128"
     — três vezes mais largo — deslizava para dentro e tapava o ícone.
     Ancorando o centro, o selo cresce para os dois lados a partir do
     mesmo ponto e o ícone continua legível em qualquer contagem.
     Visto no print, com sino (5), envelope (128) e ponto lado a lado. */
  .wm-notification-badge .wm-badge {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(50%, -50%);
    border: 2px solid var(--wm-surface-primary);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14);
  }
  .wm-notification-badge .wm-badge--error {
    background: var(--wm-error-solid);
    color: var(--wm-label-on-accent);
  }
}