/* Filter pills, after the pattern used in memorable's design system: a dashed
   outline invites you to add a filter, a solid one says it is applied, and the
   chosen values sit right in the pill so a chain of filters reads at a glance.
   Opening is pure CSS — a tabindex on the wrapper plus :focus-within. */
.filter-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs);
}

.filter {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  padding: var(--space-3xs) var(--space-sm);
  border: 1px var(--filter-border-style, dashed) var(--color-border-strong);
  border-radius: var(--radius-full);
  background-color: var(--filter-background, var(--color-surface));
  color: var(--color-text-soft);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  inline-size: max-content;
  cursor: pointer;
}

.filter:hover {
  --filter-background: var(--color-surface-sunken);
  --filter-border-style: solid;
}

.filter--active {
  --filter-border-style: solid;
  color: var(--color-text);
}

.filter__icon {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
}

.filter__values {
  padding-left: var(--space-3xs);
  border-left: 1px solid var(--color-border);
  color: var(--color-saved);
  font-weight: var(--weight-medium);
  max-width: 11rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.filter__remove {
  display: flex;
  padding: 0;
  color: var(--color-text-faint);
}

.filter__remove:hover {
  color: var(--color-danger);
}

.filter-dropdown {
  position: relative;
  display: inline-flex;
  z-index: 50;
}

.filter-dropdown__menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 50;
  margin-top: var(--space-2xs);
  padding: var(--space-sm);
  min-width: 14rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: scale(0.96);
  transform-origin: top left;
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.filter-dropdown:focus-within .filter-dropdown__menu {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.filter-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  max-height: 15rem;
  overflow-y: auto;
}

.filter-option {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--text-sm);
  color: var(--color-text);
  cursor: pointer;
}

.filter-option input {
  accent-color: var(--color-primary);
}

.filter-option__count {
  margin-left: auto;
  color: var(--color-text-faint);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

.filter-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border);
}

/* On a phone there is no room beside a pill for a 14 rem menu: opened from the
   second pill it hung off the side of the panel. Below this width the menu
   stops hanging from its pill and drops from the bar instead, edge to edge —
   `position: static` hands the anchoring up to `.filters`, which is sticky and
   so is already a containing block. The pill still opens it. */
@media (max-width: 30rem) {
  .filter-dropdown {
    position: static;
  }

  .filter-dropdown__menu {
    inset-inline: 0;
    min-width: 0;
  }
}