.filters {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 20px;
  margin-bottom: 24px;
}

.filters__list {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

.filters__list::-webkit-scrollbar {
  display: none;
}

.filters.is-overflow:not(.is-open):not(.is-end) .filters__list {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent);
}

.filters.is-open .filters__list {
  flex-wrap: wrap;
  overflow: visible;
}

.filters__toggle {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--color-border-subtle);
  border-radius: 50%;
  background: var(--color-surface-card);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}

.filters__toggle[hidden] {
  display: none;
}

.filters__toggle .icon {
  width: 24px;
  height: 24px;
}

.filters__toggle:hover,
.filters__toggle[aria-expanded="true"] {
  border-color: transparent;
  background: var(--color-brand-50);
  color: var(--color-brand-700);
}

@media (max-width: 767px) {
  .filters {
    padding: 12px;
    gap: 8px;
  }

  .filters.is-open {
    flex-wrap: wrap;
  }

  .filters.is-open .filters__list {
    order: 2;
    flex-basis: 100%;
  }

  .filters.is-open .filters__toggle {
    margin-left: auto;
  }

  .filters__list {
    gap: 8px;
  }

  .filters__item {
    padding: 10px 16px;
  }
}

.filters__item {
  flex: none;
  white-space: nowrap;
  border: none;
  background: var(--color-surface-subtle);
  color: var(--color-text-secondary);
  font-family: inherit;
  font-size: var(--text-m-size);
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}

.filters__item:hover {
  background: var(--color-brand-50);
  color: var(--color-brand-700);
}

.filters__item.is-active {
  background: var(--gradient-brand);
  color: var(--color-text-inverse);
}

.filters-target {
  transition: opacity var(--duration-fast) var(--ease-out);
}

.filters-target.is-loading {
  opacity: .35;
  pointer-events: none;
}

.filters-empty {
  padding: 40px;
  border-radius: var(--radius-lg);
  background: var(--color-surface-panel);
  color: var(--color-text-muted);
  text-align: center;
}