@mixin tags-background-mapping {

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

      .tag__close:hover {
        background: returnColorCSSVar('brand-secondary-tint-80');

        .icon svg {
          fill: returnColorCSSVar('brand-tertiary')
        }
      }

      .icon svg {
        fill: returnColorCSSVar('brand-tertiary-tint-80');
      }
    }

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

      .tag__close:hover {
        background: returnColorCSSVar('brand-primary-alpha-10');
      }

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


  // todo remove when color mapping is final

  // light blue
  &.tag--remove.bg-brand--light-blue {
    background: $color--one-7;
    color: $color-brand--one;

    .tag__close:hover {
      background: $color-alpha--one-30;

      .icon svg {
        fill: $color-brand--one;
      }
    }

    .icon svg {
      fill: $color-brand--one;
    }
  }
}
