.filter-button {
  min-inline-size: 0;
  max-inline-size: 100%;
}

.filter-button__label {
  min-inline-size: 0;
}

.filter-button__chevron {
  color: var(--color-text-muted);
}

.filter-button--active {
  border-color: transparent;
  background-color: var(--color-accent-soft);
  color: var(--color-accent);
}

.filter-button--active .filter-button__chevron {
  color: currentcolor;
}

@media (hover: hover) {
  .filter-button--active:hover:not(:disabled, [aria-disabled="true"]) {
    background-color: color-mix(in oklab, var(--color-accent-soft) 92%, var(--color-accent));
  }
}

@media (forced-colors: active) {
  .filter-button--active {
    outline: var(--focus-ring-width) solid currentcolor;
  }
}