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

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

      &:hover {
        text-decoration: none;
      }

      &::before {
        @include svg-base64(
          'chevron-left-8',
          $navigation-bottom-breadcrumb-color
        );
        left: 0;
        position: absolute;
      }
    }
  }

  // viewport large
  @include viewport--l {
    .breadcrumb {
      @include font-style('body--xs');
      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',
            $navigation-bottom-breadcrumb-color
          );
          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;
        }

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

  // background mappings
  @include breadcrumb-background-mapping;
}
