.badge {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  border-radius: var(--radius-4);
  overflow: hidden;
  font-family: var(--font-family-base);
  white-space: nowrap;
}

.badge__dot {
  flex: none;
  width: 6px;
  height: 6px;
}
.badge__dot svg { display: block; width: 100%; height: 100%; }

.badge--sm { padding: var(--spacing-4); }
.badge--md { gap: var(--spacing-6); padding: var(--spacing-4) var(--spacing-8); }
.badge--lg { gap: var(--spacing-6); padding: var(--spacing-4) var(--spacing-10); }

.badge--primary { color: var(--color-gray-0); }
.badge--primary.badge--brand  { background: var(--color-accent-400); }
.badge--primary.badge--gray   { background: var(--color-gray-400); }
.badge--primary.badge--orange { background: var(--color-warning-300); }
.badge--primary.badge--green  { background: var(--color-positive-400); }
.badge--primary.badge--blue   { background: var(--color-information-400); }
.badge--primary.badge--red    { background: var(--color-negative-400); }
.badge--primary.badge--purple { background: var(--color-loot-epic); }
.badge--primary.badge--teal   { background: var(--color-teal-400); }

.badge--secondary.badge--brand  { background: var(--color-accent-25);      color: var(--color-accent-600); }
.badge--secondary.badge--gray   { background: var(--color-gray-25);        color: var(--color-gray-500); }
.badge--secondary.badge--orange { background: var(--color-warning-25);     color: var(--color-warning-400); }
.badge--secondary.badge--green  { background: var(--color-positive-50);    color: var(--color-positive-500); }
.badge--secondary.badge--blue   { background: var(--color-information-25);  color: var(--color-information-500); }
.badge--secondary.badge--red    { background: var(--color-negative-50);    color: var(--color-negative-500); }
.badge--secondary.badge--purple { background: var(--color-purple-25);      color: var(--color-loot-epic); }
.badge--secondary.badge--teal   { background: var(--color-teal-25);        color: var(--color-teal-500); }

.badge--timer { background: var(--color-gray-0); color: var(--color-gray-900); }
.badge--sale  { padding: var(--spacing-4) var(--spacing-6); }