div.chip {
  --chip-text-color: var(--Base-Text-High-contrast);
  --chip-background-color: var(--Base-Surface-Primary-light-Normal);
  align-items: center;
  color: var(--chip-text-color);
  background-color: var(--chip-background-color);
  border-radius: var(--Corner-radius-Small);
  display: flex;
  gap: var(--Spacing-x-half);
  justify-content: center;
}

.chip.small {
  padding: var(--Spacing-x-quarter) var(--Spacing-x-half);
}

.chip.medium {
  padding: var(--Spacing-x-half) var(--Spacing-x1);
}

.chip *,
.chip svg * {
  fill: var(--chip-text-color);
}

.chip.burgundy {
  --chip-text-color: var(--Primary-Dark-On-Surface-Text);
  --chip-background-color: var(--Base-Text-High-contrast);
}

.chip.transparent {
  --chip-text-color: var(--UI-Input-Controls-On-Fill-Normal);
  --chip-background-color: rgba(64, 57, 55, 0.9);
}

.chip.tag {
  --chip-background-color: var(--Base-Surface-Subtle-Hover);
}

.chip.uiTextHighContrast {
  --chip-background-color: var(--UI-Text-High-contrast);
  --chip-text-color: var(--UI-Input-Controls-On-Fill-Normal);
}