.c-token-swatch {
  background: var(--token-color);
  border: var(--line-strong);
  border-radius: var(--radius-small);
  min-height: 5rem;
}

.c-token-swatch__label {
  background: var(--color-console-scrim);
  color: var(--color-console-text);
  display: block;
  font-size: 0.85rem;
  padding: var(--space-2);
}

.c-genre-chrome {
  background: var(--brand-panel-background-quiet);
  border: var(--line-thin);
  border-block-start: 4px solid var(--genre-color);
  border-radius: var(--radius-medium);
  padding: var(--space-5);
}

.c-genre-chrome--log {
  --genre-color: var(--brand-genre-log);
}

.c-genre-chrome--story {
  --genre-color: var(--brand-genre-story);
}

.c-kind-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.c-kind-filter a,
.c-steam-callout__link {
  border: var(--line-strong);
  border-radius: var(--radius-small);
  display: inline-block;
  font-weight: 700;
  padding: var(--space-2) var(--space-4);
  text-decoration: none;
}

.c-kind-filter a:hover,
.c-kind-filter a:focus-visible,
.c-steam-callout__link:hover,
.c-steam-callout__link:focus-visible {
  background: var(--brand-action-background);
  border-color: var(--brand-action-border);
  color: var(--brand-action-text);
}