.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-primary {
  --hs-badge-color: var(--hs-palette-primary-main);
  --hs-badge-color-contrast: var(--hs-palette-primary-contrast);
}

.badge--color-secondary {
  --hs-badge-color: var(--hs-palette-secondary-main);
  --hs-badge-color-contrast: var(--hs-palette-secondary-contrast);
}

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

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

.badge--color-action {
  --hs-badge-color: var(--hs-palette-action-main);
  --hs-badge-color-contrast: var(--hs-palette-action-contrast);
}

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

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

.badge--color-grey {
  --hs-badge-color: var(--hs-palette-grey-600);
  --hs-badge-color-contrast: var(--hs-palette-white);
}

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

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