.ui-breadcrumbs {
  &-large {
    display: flex;
    justify-content: space-around;
    height: 100%;
    margin: 0 auto;
    padding: 0;

    list-style-type: none;

    &__crumb {
      align-self: center;

      color: ui-color(natural);

      opacity: 0.5;

      &--active {
        opacity: 1;
      }
    }
  }

  &-small {
    display: flex;
    justify-content: center;
    height: 100%;
    margin: 0 auto;

    &__crumb {
      position: relative;

      align-self: center;

      color: ui-color(natural);

      opacity: 0.4;

      &::after {
        @include ui-icon--arrow-right;
        position: relative;
        top: 2px;

        margin: 0 1rem;

        color: ui-color(natural);
      }

      &:last-child::after {
        display: none;
      }

      &--active {
        opacity: 1;
      }
    }
  }

  &-mb {
    margin-bottom: $ui-headings-margin-bottom;
  }
}