.badge {
  border-radius: var(--badge-border-radius);
  border-width: var(--badge-border-width);
  border-style: var(--badge-border-style);
  border-color: var(--badge-border-color);
  background-color: var(--badge-background-color);
  padding-inline: var(--badge-padding-x);
  padding-block: var(--badge-padding-y);
  display: inline-flex;
  align-items: center;
  text-wrap: nowrap;
  line-height: normal;
}

.badge-sm {
  padding-inline: var(--badge-padding-x-sm);
  padding-block: var(--badge-padding-y-sm);
}

.badge-md {
  padding-inline: var(--badge-padding-x-md);
  padding-block: var(--badge-padding-y-md);
}

.badge-lg {
  padding-inline: var(--badge-padding-x-lg);
  padding-block: var(--badge-padding-y-lg);
}

.badge-primary {
  border-color: var(--color-transparent);
  background-color: var(--color-primary);
  color: var(--content-on-primary);
}

.badge-secondary {
  border-color: var(--color-transparent);
  background-color: var(--color-secondary);
  color: var(--content-on-secondary);
}

.badge-tertiary {
  border-color: var(--color-transparent);
  background-color: var(--color-tertiary);
  color: var(--content-on-tertiary);
}

.badge-success {
  border-color: var(--color-transparent);
  background-color: var(--color-success);
  color: var(--content-on-success);
}

.badge-info {
  border-color: var(--color-transparent);
  background-color: var(--color-info);
  color: var(--content-on-info);
}

.badge-warning {
  border-color: var(--color-transparent);
  background-color: var(--color-warning);
  color: var(--content-on-warning);
}

.badge-danger {
  border-color: var(--color-transparent);
  background-color: var(--color-danger);
  color: var(--content-on-danger);
}

.badge-neutral {
  border-color: var(--color-transparent);
  background-color: var(--color-neutral);
  color: var(--content-on-neutral);
}

.badge-light {
  border-color: var(--color-transparent);
  background-color: var(--color-light);
  color: var(--content-on-light);
}

.badge-dark {
  border-color: var(--color-transparent);
  background-color: var(--color-dark);
  color: var(--content-on-dark);
}

.badge-white {
  border-color: var(--color-transparent);
  background-color: var(--color-white);
  color: var(--content-on-white);
}

.badge-black {
  border-color: var(--color-transparent);
  background-color: var(--color-black);
  color: var(--content-on-black);
}

.badge-primary-ghost {
  border-color: var(--color-transparent);
  background-color: var(--color-primary-ghost);
  color: var(--content-on-primary-ghost);
}

.badge-secondary-ghost {
  border-color: var(--color-transparent);
  background-color: var(--color-secondary-ghost);
  color: var(--content-on-secondary-ghost);
}

.badge-tertiary-ghost {
  border-color: var(--color-transparent);
  background-color: var(--color-tertiary-ghost);
  color: var(--content-on-tertiary-ghost);
}

.badge-success-ghost {
  border-color: var(--color-transparent);
  background-color: var(--color-success-ghost);
  color: var(--content-on-success-ghost);
}

.badge-info-ghost {
  border-color: var(--color-transparent);
  background-color: var(--color-info-ghost);
  color: var(--content-on-info-ghost);
}

.badge-warning-ghost {
  border-color: var(--color-transparent);
  background-color: var(--color-warning-ghost);
  color: var(--content-on-warning-ghost);
}

.badge-danger-ghost {
  border-color: var(--color-transparent);
  background-color: var(--color-danger-ghost);
  color: var(--content-on-danger-ghost);
}

.badge-neutral-ghost {
  border-color: var(--color-transparent);
  background-color: var(--color-neutral-ghost);
  color: var(--content-on-neutral-ghost);
}

.badge-light-ghost {
  border-color: var(--color-transparent);
  background-color: var(--color-light-ghost);
  color: var(--content-on-light-ghost);
}

.badge-dark-ghost {
  border-color: var(--color-transparent);
  background-color: var(--color-dark-ghost);
  color: var(--content-on-dark-ghost);
}

.badge-white-ghost {
  border-color: var(--color-transparent);
  background-color: var(--color-white-ghost);
  color: var(--content-on-white-ghost);
}

.badge-black-ghost {
  border-color: var(--color-transparent);
  background-color: var(--color-black-ghost);
  color: var(--content-on-black-ghost);
}