.badge {
  --#{$prefix}badge-gap: #{$badge-gap};
  --#{$prefix}badge-icon-size: #{$badge-font-size};
  --#{$prefix}badge-bg: #{$badge-bg};
  --#{$prefix}badge-color: #{$badge-color};
  --#{$prefix}badge-sm-font-size: var(--#{$prefix}font-size-sm);
  --#{$prefix}badge-lg-font-size: var(--#{$prefix}fs-5);

  display: inline-flex;
  gap: var(--#{$prefix}badge-gap);
  align-items: center;
  color: var(--#{$prefix}badge-color);
  background-color: var(--#{$prefix}badge-bg);

  .d-icon {
    --#{$prefix}icon-size: .75rem;
  }

  @each $theme, $value in map-remove($theme-colors, "light") {
    $color: color-contrast-var($value);

    &.badge-#{$theme} {
      --#{$prefix}badge-bg: var(--#{$prefix}#{$theme});
      --#{$prefix}badge-color: #{$color};
    }
  }


  &.badge-sm {
    --#{$prefix}badge-font-size: var(--#{$prefix}badge-sm-font-size);
  }

  &.badge-lg {
    --#{$prefix}badge-font-size: var(--#{$prefix}badge-lg-font-size);
  }

  &.badge-secondary {
    --#{$prefix}badge-bg: var(--#{$prefix}gray-100);
    --#{$prefix}badge-color: var(--#{$prefix}gray-900);
  }

  &.badge-light {
    --#{$prefix}badge-bg: var(--#{$prefix}gray-25);
    --#{$prefix}badge-color: var(--#{$prefix}gray-700);
  }

  &.badge-soft-primary {
    --#{$prefix}badge-bg: var(--#{$prefix}primary-50);
    --#{$prefix}badge-color: var(--#{$prefix}primary-700);
  }

  &.badge-soft-secondary {
    --#{$prefix}badge-bg: var(--#{$prefix}gray-50);
    --#{$prefix}badge-color: var(--#{$prefix}gray-700);
  }

  &.badge-soft-success {
    --#{$prefix}badge-bg: var(--#{$prefix}success-50);
    --#{$prefix}badge-color: var(--#{$prefix}success-700);
  }

  &.badge-soft-warning {
    --#{$prefix}badge-bg: var(--#{$prefix}warning-50);
    --#{$prefix}badge-color: var(--#{$prefix}warning-800);
  }

  &.badge-soft-info {
    --#{$prefix}badge-bg: var(--#{$prefix}info-50);
    --#{$prefix}badge-color: var(--#{$prefix}info-700);
  }

  &.badge-soft-danger {
    --#{$prefix}badge-bg: var(--#{$prefix}danger-50);
    --#{$prefix}badge-color: var(--#{$prefix}danger-700);
  }

  &.badge-soft-light {
    --#{$prefix}badge-bg: var(--#{$prefix}gray-25);
    --#{$prefix}badge-color: var(--#{$prefix}gray-500);
  }

  &.badge-soft-dark {
    --#{$prefix}badge-bg: var(--#{$prefix}gray-100);
    --#{$prefix}badge-color: var(--#{$prefix}body-color);
  }
}