@mixin pagination-background-mapping {
  // ! Deprecation warning, do not use anymore. Will be removed in a later release use bg-variants function instead.

  .pagination {
    &__control .icon {
      .bg-brand--dark-blue & {
        color: $color-brand--one;
      }

      .bg-brand--turquoise &,
      .bg-brand--yellow & {
        color: $color-brand--four;
      }

      .bg-brand--red & {
        color: $color-brand--two;
      }
    }

    &__item > a {
      .bg-brand--blue &,
      .bg-brand--dark-blue &,
      .bg-brand--turquoise &,
      .bg-brand--yellow &,
      .bg-brand--red & {
        text-decoration: underline;
      }
    }

    .bg-brand--turquoise & {
      color: $color-brand--two;
    }
  }
}