/* ==========================================================================
   Chip - Unified interactive label component
   Base class with state modifiers
   ========================================================================== */

/* Base chip — outlined rectangle */
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-1) var(--space-3);
  margin: 0 var(--space-1) var(--space-1) 0;
  gap: var(--space-1);
  white-space: nowrap;
  border: var(--border-normal) var(--np-color-outline);
  background: transparent;
  font-family: var(--font-primary);
  font-size: var(--text-small-size);
  color: var(--np-color-on-surface);
  cursor: pointer;
  transition: background var(--transition-fast),
              color var(--transition-fast),
              border-color var(--transition-fast);
}

.chip:hover {
  border-color: var(--np-color-outline-strong);
}

/* --- State: Selected (filled/inverted) --- */

.chip--selected {
  background: var(--np-color-inverse-surface);
  color: var(--np-color-inverse-on-surface);
  border-color: var(--np-color-inverse-surface);
}

.chip--selected:hover {
  background: var(--np-color-outline-strong);
  border-color: var(--np-color-outline-strong);
}

/* --- Filter states (scoped to filter variant) --- */

/* Inactive: user explicitly toggled this chip off */
.chip--filter:not(.chip--active) {
  text-decoration: line-through;
}

/* Irrelevant: other filter choices have eliminated all matching items — non-interactive */
.chip--filter:not(.chip--relevant) {
  color: var(--np-color-on-surface);
  opacity: 0.38;
  pointer-events: none;
  cursor: default;
}