@mixin tags-add-background-mapping {

  &.tag--primary {
      border: 1px solid $color-brand--one;
      color: $color-brand--one;

      &:hover:not(.tag__checked-background-color) {
         background: $color--one-light;
      }

      .selection-control .icon {
         border: 1px solid $color-brand--one;
      }

      &.tag__checked-background-color {
        background: $color-brand--one;
        color: $color-brand--four;

        &:hover {
          .selection-control__input {
            background: $color--one-80;

            .icon {
              background: $color--one-80;
              border: 1px solid $color--one-80;
            }
          }
        }
      }

  }
}
