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

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

      &:hover {
        text-decoration: none;
      }

      &::before {
        @include svgMask('chevron-left-8');
        background-color: $color-brand--white;
        content: '';
        height: 8px;
        left: 0;
        position: absolute;
        top: 10px;
        width: 8px;
      }
    }
  }

  // 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 svgMask('chevron-right-8');
          content: '';
          background-color: $navigation-bottom-breadcrumb-color;
          display: inline-block;
          height: $icon-size--xs;
          margin-right: 7px;
          position: relative;
          width: $icon-size--xs;
        }
      }
    }
  }

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