/* Badge colours beyond stock's primary, secondary and negative. Named for the hue, not the role:
   `StatusBadge` says which state wears which, so a role name here would repeat it. Each reads a
   surface/text token pair from theme.css, in the shape of stock's `.badge--negative`. */

.badge--green {
  --badge-background: var(--color-surface-green);
  --badge-border-color: transparent;
  --badge-color: var(--color-text-green);
}

.badge--blue {
  --badge-background: var(--color-surface-blue);
  --badge-border-color: transparent;
  --badge-color: var(--color-text-blue);
}

.badge--sky {
  --badge-background: var(--color-surface-sky);
  --badge-border-color: transparent;
  --badge-color: var(--color-text-sky);
}

.badge--purple {
  --badge-background: var(--color-surface-purple);
  --badge-border-color: transparent;
  --badge-color: var(--color-text-purple);
}