/*
  Wortic macOS UI Kit — Chips
  wm-chip — chip de entrada (input), de seleção (choice), removível,
  com avatar, com ícone e o estado escolhido. Um chip é sempre um
  elemento interativo pequeno em forma de pílula.
*/

@layer components {
  .wm-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--wm-space-3);
    height: var(--wm-control-height-sm);
    padding-inline: var(--wm-space-5);
    border: none;
    border-radius: var(--wm-radius-pill);
    background: var(--wm-fill-secondary);
    box-shadow: inset 0 0 0 0.5px light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.1));
    font-family: var(--wm-font-family);
    font-size: var(--wm-font-size-subheadline);
    font-weight: var(--wm-font-weight-medium);
    letter-spacing: var(--wm-tracking-subheadline);
    color: var(--wm-label-primary);
    cursor: default;
    transition:
      background var(--wm-duration-fast) var(--wm-ease-standard),
      box-shadow var(--wm-duration-fast) var(--wm-ease-standard),
      color var(--wm-duration-fast) var(--wm-ease-standard),
      transform var(--wm-duration-fast) var(--wm-ease-emphasized),
      opacity var(--wm-duration-fast) var(--wm-ease-standard);
  }

  /* Chip interativo (button): choice e input */
  button.wm-chip,
  .wm-chip--choice,
  .wm-chip--input {
    cursor: pointer;
  }
  button.wm-chip:hover,
  .wm-chip--choice:hover,
  .wm-chip--input:hover {
    background: var(--wm-fill-primary);
  }
  button.wm-chip:active {
    transform: scale(var(--wm-scale-pressed-sm));
  }
  .wm-chip:focus-visible {
    outline: var(--wm-focus-ring-width) solid var(--wm-accent);
    outline-offset: var(--wm-focus-ring-offset);
  }

  /* ============================================================
     Estado escolhido — aria-pressed / .is-selected
     ============================================================ */
  .wm-chip[aria-pressed="true"],
  .wm-chip.is-selected {
    background: var(--wm-accent-fill);
    box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--wm-accent) 26%, transparent);
    color: var(--wm-accent-text);
  }
  .wm-chip[aria-pressed="true"]:hover,
  .wm-chip.is-selected:hover {
    background: var(--wm-accent-fill-strong);
  }
  .wm-chip[aria-pressed="true"] .wm-chip__icon,
  .wm-chip.is-selected .wm-chip__icon {
    color: inherit;
  }

  /* Check que aparece no escolhido (choice chip) */
  .wm-chip__check {
    display: none;
    flex: none;
    color: inherit;
  }
  .wm-chip[aria-pressed="true"] .wm-chip__check,
  .wm-chip.is-selected .wm-chip__check {
    display: inline-flex;
  }

  /* ============================================================
     Partes
     ============================================================ */
  .wm-chip__icon {
    flex: none;
    color: var(--wm-label-secondary);
    margin-inline-start: calc(-1 * var(--wm-space-1));
  }

  .wm-chip__avatar {
    flex: none;
    width: var(--wm-chip-avatar-size);
    height: var(--wm-chip-avatar-size);
    border-radius: 50%;
    margin-inline-start: calc(-1 * var(--wm-space-3));
    object-fit: cover;
    box-shadow: inset 0 0 0 0.5px light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.14));
  }
  /* avatar de iniciais (sem imagem) */
  .wm-chip__avatar--initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--wm-accent-fill);
    color: var(--wm-accent-text);
    font-size: var(--wm-font-size-caption2);
    font-weight: var(--wm-font-weight-semibold);
  }

  .wm-chip__remove {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--wm-chip-remove-size);
    height: var(--wm-chip-remove-size);
    margin-inline-end: calc(-1 * var(--wm-space-2));
    border: none;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    opacity: 0.6;
    cursor: pointer;
    transition:
      background var(--wm-duration-fast) var(--wm-ease-standard),
      opacity var(--wm-duration-fast) var(--wm-ease-standard);
  }
  .wm-chip__remove:hover {
    opacity: 1;
    background: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.16));
  }
  .wm-chip__remove:focus-visible {
    outline: var(--wm-focus-ring-width) solid var(--wm-accent);
    outline-offset: var(--wm-focus-ring-offset);
    opacity: 1;
  }

  /* saída animada ao remover */
  .wm-chip.is-removing {
    opacity: 0;
    transform: scale(var(--wm-scale-pressed-sm));
  }

  /* ============================================================
     Desabilitado
     ============================================================ */
  .wm-chip:disabled,
  .wm-chip.is-disabled {
    background: var(--wm-fill-quaternary);
    box-shadow: inset 0 0 0 0.5px light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.06));
    color: var(--wm-label-tertiary);
    cursor: not-allowed;
  }
  .wm-chip:disabled .wm-chip__icon,
  .wm-chip.is-disabled .wm-chip__icon {
    color: var(--wm-label-quaternary);
  }

  /* Grupo de chips */
  .wm-chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wm-space-4);
  }

  @media (prefers-reduced-motion: reduce) {
    .wm-chip,
    .wm-chip__remove {
      transition: none;
    }
    button.wm-chip:active,
    .wm-chip.is-removing {
      transform: none;
    }
  }
}