@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('iconInformativeAlternative');
        }
      }
    }
  }

    // ! 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
          background-color: $color-brand--two;
        }
      }
    }

    .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
          background-color: $color--two-180;
        }
      }
    }

    @include viewport--l {

      .bg-brand--blue &,
      .bg-brand--dark-blue & {
        .breadcrumb__item + .breadcrumb__item:before {
          background-color: $color-brand--white;
          opacity: 0.5;
        }
      }

      .bg-brand--off-white &,
      .bg-brand--white &,
      .bg-brand--yellow &,
      .bg-brand--turquoise &,
      .navigation--dark-from-l & {
        .breadcrumb__item + .breadcrumb__item:before {
          background-color: $color-brand--two;
          opacity: 0.5;
        }
      }

      .bg-brand--red & .breadcrumb__item + .breadcrumb__item::before {
        background-color: $color--two-180;
        opacity: 0.5;
      }
    }
    // ! //

}