.navigation__bottom {
 @include viewport--l('inversed') {
  .breadcrumb {
    margin-right: auto;
    overflow: hidden;
  }

  .breadcrumb__link {
    @include text-ellipsis($display: block);
    color: $color-brand--four;
    padding-left: 15px;
    position: relative;
    transition: none;

    &:hover {
      text-decoration: none;
    }

    &::before {
      @include svg-base64('chevron-left-8', $color-brand--four);
      left: 0;
      position: absolute;
    }
  }
  // background color mapping
  .bg-brand--off-white &,
  .bg-brand--white &,
  .bg-brand--yellow & {
    .breadcrumb__link {
      color: $color-alpha--two-70;
    }

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

 // viewport large
 @include viewport--l {
  .breadcrumb {
    @include font-style('body--s');
    height: $baseline * 1.5;
    margin-top: $baseline * 1.5;

    &__list {
      display: flex;
    }

    &__link {
      color: $color-alpha--four-50;
    }

    &__item {
      & + .breadcrumb__item {
        margin-left: 10px;
      }

      & + .breadcrumb__item::before {
        @include svg-base64('chevron-right-8', $color-brand--four);
        display: inline-block;
        height: $icon-size--xs;
        margin-right: 7px;
        opacity: 0.5; // add opacity to simulate alpha channel
        position: relative;
        width: $icon-size--xs;
      }

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

      .navigation--light-from-l & + .breadcrumb__item::before,
      .navigation--light-from-l & + .breadcrumb__item::before {
        @include svg-base64('chevron-right-8', $color-brand--four);
        opacity: 0.5; // add opacity to simulate alpha channel
      }
    }
  }
 }
}
