/* ==========================================================================
   Meta Elements
   ========================================================================== */

/* Filter Bar
   ---------------------------------------- */
.filter-bar {
  display: flex;
  height: 100%;
  background-color: var(--np-color-surface);
}

.filter-bar__counter {
  display: flex;
  align-items: stretch;
  background-color: var(--np-color-inverse-surface);
}

.filter-bar__text {
  display: flex;
  align-items: center;
  padding-inline: var(--space-2);
  white-space: nowrap;
  color: var(--np-color-inverse-on-surface);
  font-size: var(--text-nav-label-size);
  font-weight: var(--text-nav-label-weight);
  line-height: var(--text-nav-label-line-height);
  letter-spacing: var(--text-nav-label-letter-spacing);
}

.filter-bar__inline-reset {
  width: var(--size-touch);
  height: var(--size-touch);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-inline-end: var(--border-normal) var(--np-color-inverse-surface);
  background-color: var(--np-color-surface);
  color: var(--np-color-on-surface);
  cursor: pointer;
}

.filter-bar__groups {
  display: flex;
  flex: 1;
  overflow-x: auto;
}

.filter-bar__group {
  display: flex;
}

.filter-bar__chips {
  display: flex;
}

/* Meta Chip (filter chips)
   ---------------------------------------- */
.meta-chip {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: var(--space-2);
  gap: var(--space-1);
  white-space: nowrap;
  border: none;
  border-inline-end: var(--border-normal) var(--np-color-inverse-surface);
  background: transparent;
  color: var(--np-color-on-surface);
  cursor: pointer;
}

/* Remove border from the very last chip */
.filter-bar__group:last-child .filter-bar__chips .meta-chip:last-child {
  border-inline-end: none;
}

/* Chip state: inactive (hidden items) - strikethrough */
.meta-chip:not(.meta-chip--active) {
  text-decoration: line-through;
}

/* Chip state: irrelevant (no matching items) - M3 disabled state */
.meta-chip:not(.meta-chip--relevant) {
  color: var(--np-color-on-surface);
  opacity: 0.38;
  pointer-events: none;
  cursor: default;
}