@mixin badge-color-mapping {

  .badge {
    &--primary {
      background: returnColorCSSVar('brand-primary');
      color: returnColorCSSVar('white');
    }

    &--primary-tint-7 {
      background: returnColorCSSVar('brand-primary-tint-7');
      color: returnColorCSSVar('brand-secondary');

      .icon {
        color: returnColorCSSVar('brand-primary');
      }
    }

    &--secondary {
      background: returnColorCSSVar('brand-secondary');
      color: returnColorCSSVar('white');
    }

    &--tertiary {
      background: returnColorCSSVar('brand-tertiary');
      color: returnColorCSSVar('brand-secondary');
    }

    &--tertiary-shade-110 {
      background: returnColorCSSVar('brand-tertiary-shade-110');
      color: returnColorCSSVar('brand-secondary');
    }

    &--senary {
      background: returnColorCSSVar('brand-senary');
      color: returnColorCSSVar('brand-secondary');
    }

    &--positive {
      background: returnColorCSSVar('ui-positive');
      color: returnColorCSSVar('white');
    }

    &--negative {
      background: returnColorCSSVar('ui-negative');
      color: returnColorCSSVar('white');
    }
  }
}