.ds-category-nav {
  overflow: hidden;
  border-radius: var(--ds-border-radius);
  border: var(--ds-border-width) solid var(--ds-color-border);
  background: var(--ds-color-surface);
}

.ds-category-nav__list {
  display: flex;
  gap: calc(var(--ds-spacing-unit) * 2);
  padding: calc(var(--ds-spacing-unit) * 3);
  overflow-x: auto;
  scrollbar-width: thin;
}

.ds-category-nav__item {
  white-space: nowrap;
  padding: calc(var(--ds-spacing-unit) * 2) calc(var(--ds-spacing-unit) * 3);
  border-radius: 999px;
  border: var(--ds-border-width) solid var(--ds-color-border);
  background: transparent;
  color: var(--ds-color-text);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ds-category-nav__item:hover {
  background: color-mix(in srgb, var(--ds-color-text) 6%, transparent);
}

.ds-category-nav__item--active {
  border-color: color-mix(in srgb, var(--ds-color-accent) 40%, var(--ds-color-border));
  background: color-mix(in srgb, var(--ds-color-accent) 10%, transparent);
  color: var(--ds-color-accent);
}

.ds-category-nav__item--loading {
  opacity: 0.7;
}