@mixin tags-add-background-mapping {

  border: 1px solid returnColorCSSVar('brand-primary');
  color: returnColorCSSVar('brand-primary');

  &:hover:not(.tag__checked-background-color) {
    background: returnColorCSSVar('brand-primary-tint-7');
  }

  .selection-control .icon {
    border: 1px solid returnColorCSSVar('brand-primary');
  }

  // checked state checkbox form color mapping override so high specificity
  .tag__checkbox.selection-control--checkbox input:checked + .selection-control__control{
    background: returnColorCSSVar('brand-primary');
    border-color: returnColorCSSVar('brand-primary');
  }

  //checked state tags.js related class --> color mapped:
  &.tag__checked-background-color {
    background: returnColorCSSVar('brand-primary');
    color: returnColorCSSVar('brand-tertiary');

    &:hover {
      .tag__checkbox.selection-control--checkbox .selection-control__input {
        background: returnColorCSSVar('brand-primary-tint-80');

        .icon {
          background: returnColorCSSVar('brand-primary-tint-80');
          border-color: returnColorCSSVar('brand-primary-tint-80');
        }
      }
    }
  }
}
