/* Chip — la pastille qu'on manipule : on la sélectionne, on la retire, elle filtre.
   Référence : docs/design-system.md. */

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  height: 26px;
  padding: 0 var(--space-3);
  border: 1px solid var(--chip-border, var(--color-border));
  border-radius: var(--radius-pill);
  background: var(--chip-bg, var(--color-surface));
  color: var(--chip-text, var(--color-text));
  font-size: var(--text-12);
  font-weight: var(--weight-medium);
  line-height: normal; /* centré par la boîte, pas par la ligne — raison dans count.css (#232) */
  white-space: nowrap;
  text-decoration: none;
}

.chip--sm {
  height: 22px;
  padding: 0 var(--space-2);
  font-size: var(--text-11);
}

/* --- États --- */
.chip--action {
  cursor: pointer;
  user-select: none;
}

.chip--action:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.chip--selected,
.chip--selected:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
}

.chip--dashed {
  border-style: dashed;
  background: var(--color-bg-hover);
}

.chip--dashed:hover {
  border-style: solid;
  background: var(--color-primary-bg);
}

.chip--primary {
  --tone-bg: var(--color-primary-bg);
  --tone-text: var(--color-primary);

  background: var(--tone-bg);
  border-color: transparent;
  color: var(--tone-text);
}

.chip--muted {
  opacity: 0.55;
}

/* --- Éléments --- */
.chip__remove {
  padding: 0;
  margin-left: var(--space-0-5);
  border: none;
  background: none;
  color: inherit;
  font-size: var(--text-14);
  line-height: var(--leading-none);
  cursor: pointer;
  opacity: 0.6;
}

.chip__remove:hover {
  opacity: 1;
}

.chip__text {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Un complément en retrait (« — nom du projet ») : il suit la couleur du chip,
   sélectionné compris, là où text-muted resterait gris sur fond primaire. */
.chip__meta {
  font-weight: var(--weight-normal);
  opacity: 0.75;
}
