@mixin breadcrumb-background-mapping {
  @include bg-variants {
    .breadcrumb__link {
      &:before {
        background-color: variant-property('linkIdle');
      }
    }
    @include viewport--l {
      .breadcrumb__item {
        &:before {
          background-color: variant-property('linkIdle');
        }
      }
    }

    // ! Deprecation warning use new colors instead
    .bg-brand--off-white &,
    .bg-brand--white &,
    .bg-brand--yellow &,
    .bg-brand--turquoise & {
      .breadcrumb__link {
        color: $color-brand--two;
      }

      @include viewport--l('inversed') {
        .breadcrumb__link::before {
          @include svg-base64('chevron-left-8', $color-brand--two);
          opacity: 0.7; // add opacity to simulate alpha channel
        }
      }
    }

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

      @include viewport--l('inversed') {
        .breadcrumb__link::before {
          @include svg-base64('chevron-left-8', $color--two-180);
          opacity: 0.7; // add opacity to simulate alpha channel
        }
      }
    }

    @include viewport--l {
      .breadcrumb__item {
        .bg-brand--off-white & + .breadcrumb__item::before,
        .bg-brand--white & + .breadcrumb__item::before,
        .bg-brand--yellow & + .breadcrumb__item::before,
        .bg-brand--turquoise & + .breadcrumb__item::before,
        [class*='bg-brand-']
          .navigation--dark-from-l
          &
          + .breadcrumb__item:before {
          @include svg-base64('chevron-right-8', $color-brand--two);
        }

        .bg-brand--red & + .breadcrumb__item::before {
          @include svg-base64('chevron-right-8', $color--two-180);
        }
      }
    }
    // ! //
  }
}
