.breadcrumb {
  @extend %list;
  display: flex;
  align-content: center;
  width: 100%;
  margin: 20px 0;
  color: $grey;
  font-size: .875rem;

  &__item {
    margin: 0 10px 0 0;
    max-width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    &:after {
      content: $breadcrumb-divider;
      margin-left: 10px;
    }

    &:last-of-type {
      margin: 0;

      &:after {
        content: '';
        margin: 0;
      }
      & a {
        color: $grey-medium;
      }
    }
  }
}