/*
  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);
  }

  .wm-badge--dot {
    min-width: 8px;
    width: 8px;
    height: 8px;
    padding: 0;
    background: var(--wm-accent);
    box-shadow: 0 0.5px 1.5px color-mix(in srgb, var(--wm-accent) 45%, transparent);
  }

  /* 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-tag--accent {
    background: var(--wm-accent-fill);
    color: var(--wm-accent);
    box-shadow: inset 0 0 0 var(--wm-border-width-hairline)
      color-mix(in srgb, currentColor 18%, transparent);
  }
  .wm-tag--accent:hover {
    background: var(--wm-accent-fill-strong);
  }
  .wm-tag__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    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;
  }
  .wm-notification-badge .wm-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    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);
  }
}