.container {
  display: flex;
  gap: var(--Spacing-x1);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.filter,
.filterSelected {
  border-radius: var(--Corner-radius-Rounded);
  padding: var(--Spacing-x1) var(--Spacing-x2);
  transition: all 0.2s ease-in-out;
  scroll-snap-align: start;
  flex-shrink: 0;
  font-size: var(--typography-Caption-Bold-Mobile-fontSize);
  font-family: var(--typography-Body-Regular-fontFamily);
  font-weight: 400;
  cursor: pointer;
}

.filter {
  color: var(--UI-Text-High-contrast);
  background: transparent;
  border: 1px solid var(--UI-Input-Controls-Border-Hover);
}

.filterSelected {
  color: var(--Base-Text-Inverted);
  background: var(--Base-Button-Tertiary-Fill-Normal);
  border: 1px solid transparent;
}