/* DS atom: compact quick-filter toggle (+ optional menu for recency window) */

.ds-quick-filter-wrap {
  position: relative;
  flex-shrink: 0;
}

.ds-quick-filter {
  display: inline-flex;
  align-items: center;
  gap: var(--s-space-twohair);
  margin: 0;
  padding: var(--s-space-2) var(--s-space-3);
  border: 0.5px solid var(--s-color-border-subtle);
  border-radius: 999px;
  background: var(--s-color-bg-app);
  color: var(--s-color-fg-primary);
  font: inherit;
  font-size: var(--s-font-size-0);
  white-space: nowrap;
  cursor: pointer;
  transition:
    background var(--s-duration-fast, 120ms) ease,
    border-color var(--s-duration-fast, 120ms) ease;
}

.ds-quick-filter:hover {
  border-color: var(--s-color-border-strong);
}

.ds-quick-filter--active {
  border-color: var(--s-color-border-strong);
  background: color-mix(in oklch, var(--s-color-accent-active, oklch(60% 0.05 180)) 14%, var(--s-color-bg-app));
}

.ds-quick-filter__count {
  font-variant-numeric: tabular-nums;
  font-size: var(--s-font-size-0);
  color: var(--s-color-fg-muted, var(--s-color-fg-muted));
}

.ds-quick-filter__count[hidden] {
  display: none;
}

.ds-quick-filter:focus-visible {
  outline: 2px solid var(--s-color-accent-active, oklch(60% 0.05 180));
  outline-offset: 1px;
}

.ds-quick-filter__menu {
  position: absolute;
  z-index: 50;
  top: calc(100% + var(--s-space-twohair));
  right: 0;
  min-width: 9rem;
  padding: var(--s-space-twohair) 0;
  margin: 0;
  list-style: none;
  background: var(--s-color-bg-app);
  border: 0.5px solid var(--s-color-border-subtle);
  border-radius: var(--s-radius-1);
  box-shadow: none;
}

.ds-quick-filter__menu[hidden] {
  display: none;
}

.ds-quick-filter__menu li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ds-quick-filter__menu-item {
  display: block;
  width: 100%;
  margin: 0;
  padding: var(--s-space-2) var(--s-space-3);
  border: 0;
  background: transparent;
  color: var(--s-color-fg-primary);
  font: inherit;
  font-size: var(--s-font-size-0);
  text-align: left;
  cursor: pointer;
}

.ds-quick-filter__menu-item:hover,
.ds-quick-filter__menu-item:focus-visible {
  background: var(--s-color-bg-subtle);
}

.ds-quick-filter__menu-item--current {
  font-weight: var(--s-font-weight-semibold);
}