.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--base);
  padding: var(--na) var(--x3);
  border-radius: 100px;
  border: 1.5px solid transparent;
  font-family: var(--font-family-body);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  line-height: var(--font-line-height-xs);
  white-space: nowrap;
}
.badge--icon {
  display: inline-flex;
  align-items: center;
  font-size: 1.5em;
}

.badge--brand {
  --_base: var(--badge-brand-base);
  --_tint: var(--badge-brand-tint);
}
.badge--brand.badge--filled {
  background-color: var(--_base);
  color: #fff;
  border-color: var(--_base);
}
.badge--brand.badge--ghost {
  background-color: transparent;
  color: var(--_base);
  border-color: transparent;
}
.badge--brand.badge--outline {
  background-color: transparent;
  color: var(--_base);
  border-color: var(--_base);
}
.badge--brand.badge--tint {
  background-color: var(--_tint);
  color: var(--_base);
  border-color: transparent;
}

.badge--danger {
  --_base: var(--badge-danger-base);
  --_tint: var(--badge-danger-tint);
}
.badge--danger.badge--filled {
  background-color: var(--_base);
  color: #fff;
  border-color: var(--_base);
}
.badge--danger.badge--ghost {
  background-color: transparent;
  color: var(--_base);
  border-color: transparent;
}
.badge--danger.badge--outline {
  background-color: transparent;
  color: var(--_base);
  border-color: var(--_base);
}
.badge--danger.badge--tint {
  background-color: var(--_tint);
  color: var(--_base);
  border-color: transparent;
}

.badge--important {
  --_base: var(--badge-important-base);
  --_tint: var(--badge-important-tint);
}
.badge--important.badge--filled {
  background-color: var(--_base);
  color: #fff;
  border-color: var(--_base);
}
.badge--important.badge--ghost {
  background-color: transparent;
  color: var(--_base);
  border-color: transparent;
}
.badge--important.badge--outline {
  background-color: transparent;
  color: var(--_base);
  border-color: var(--_base);
}
.badge--important.badge--tint {
  background-color: var(--_tint);
  color: var(--_base);
  border-color: transparent;
}

.badge--informative {
  --_base: var(--badge-informative-base);
  --_tint: var(--badge-informative-tint);
}
.badge--informative.badge--filled {
  background-color: var(--_base);
  color: #fff;
  border-color: var(--_base);
}
.badge--informative.badge--ghost {
  background-color: transparent;
  color: var(--_base);
  border-color: transparent;
}
.badge--informative.badge--outline {
  background-color: transparent;
  color: var(--_base);
  border-color: var(--_base);
}
.badge--informative.badge--tint {
  background-color: var(--_tint);
  color: var(--_base);
  border-color: transparent;
}

.badge--severe {
  --_base: var(--badge-severe-base);
  --_tint: var(--badge-severe-tint);
}
.badge--severe.badge--filled {
  background-color: var(--_base);
  color: #fff;
  border-color: var(--_base);
}
.badge--severe.badge--ghost {
  background-color: transparent;
  color: var(--_base);
  border-color: transparent;
}
.badge--severe.badge--outline {
  background-color: transparent;
  color: var(--_base);
  border-color: var(--_base);
}
.badge--severe.badge--tint {
  background-color: var(--_tint);
  color: var(--_base);
  border-color: transparent;
}

.badge--success {
  --_base: var(--badge-success-base);
  --_tint: var(--badge-success-tint);
}
.badge--success.badge--filled {
  background-color: var(--_base);
  color: #fff;
  border-color: var(--_base);
}
.badge--success.badge--ghost {
  background-color: transparent;
  color: var(--_base);
  border-color: transparent;
}
.badge--success.badge--outline {
  background-color: transparent;
  color: var(--_base);
  border-color: var(--_base);
}
.badge--success.badge--tint {
  background-color: var(--_tint);
  color: var(--_base);
  border-color: transparent;
}

.badge--warning {
  --_base: var(--badge-warning-base);
  --_tint: var(--badge-warning-tint);
}
.badge--warning.badge--filled {
  background-color: var(--_base);
  color: #fff;
  border-color: var(--_base);
}
.badge--warning.badge--ghost {
  background-color: transparent;
  color: var(--_base);
  border-color: transparent;
}
.badge--warning.badge--outline {
  background-color: transparent;
  color: var(--_base);
  border-color: var(--_base);
}
.badge--warning.badge--tint {
  background-color: var(--_tint);
  color: var(--_base);
  border-color: transparent;
}