.badge {
  display: inline-flex;
  font-size: var(--hs-typography-small-size);
  font-weight: 500;
  padding: calc(var(--hs-spacing-small) * 0.5) var(--hs-spacing-small);
  border-width: 1px;
  border-style: solid;
  border-radius: var(--hs-radius-boxes);
  text-transform: uppercase;
}

.badge--color-default {
  --hs-badge-color: var(--hs-palette-highlight-default-main);
  --hs-badge-color-contrast: var(--hs-palette-highlight-default-contrast);
  --hs-badge-color-accent: var(--hs-palette-highlight-default-accent);
}

.badge--color-error {
  --hs-badge-color: var(--hs-palette-highlight-error-main);
  --hs-badge-color-contrast: var(--hs-palette-highlight-error-contrast);
  --hs-badge-color-accent: var(--hs-palette-highlight-error-accent);
}

.badge--color-success {
  --hs-badge-color: var(--hs-palette-highlight-success-main);
  --hs-badge-color-contrast: var(--hs-palette-highlight-success-contrast);
  --hs-badge-color-accent: var(--hs-palette-highlight-success-accent);
}

.badge--color-info {
  --hs-badge-color: var(--hs-palette-highlight-info-main);
  --hs-badge-color-contrast: var(--hs-palette-highlight-info-contrast);
  --hs-badge-color-accent: var(--hs-palette-highlight-info-accent);
}

.badge--color-warning {
  --hs-badge-color: var(--hs-palette-highlight-warning-main);
  --hs-badge-color-contrast: var(--hs-palette-highlight-warning-contrast);
  --hs-badge-color-accent: var(--hs-palette-highlight-warning-accent);
}

.badge--color-disabled {
  --hs-badge-color: var(--hs-palette-button-disabled-main);
  --hs-badge-color-contrast: var(--hs-palette-button-disabled-contrast);
  --hs-badge-color-accent: var(--hs-palette-button-disabled-accent);
}

.badge--variant-outlined {
  color: var(--hs-badge-color-accent);
  background-color: var(--hs-palette-background);
  border: 1px solid var(--hs-badge-color-accent);
}

.badge--variant-contained {
  color: var(--hs-badge-color-contrast);
  background-color: var(--hs-badge-color);
  border: 1px solid var(--hs-badge-color);
}