// Breadcrumbs // // //

.breadcrumb {

display: inline-flex;
border: $border-width solid $border-color;

}

.breadcrumb-item {

font-size: $font-size-sm;

a {
  @include transition;
  color: $gray-500;

  &:hover {
    opacity: .8;
  }
}

}

%breadcrumb-text-whiteed {

border-color: $text-white-border;

.breadcrumb-item {

  + .breadcrumb-item::before {
    color: $text-white-border;
  }

  a {
    color: $text-white-primary;
  }

  &.active {
    color: $text-white-secondary;
  }
}

}

// // Custom Breadcrumbs // .breadcrumb-custom {

border: 0;
padding: 0;

.breadcrumb-item {
  position: relative;
  overflow: hidden;

  &:nth-child(1) {z-index: 1;}
  &:nth-child(2) {z-index: 2;}
  &:nth-child(3) {z-index: 3;}
  &:nth-child(4) {z-index: 4;}
  &:nth-child(5) {z-index: 5;}

  &.active,
  a {
    display: block;
    padding: 15px 30px;
    border: $border-width solid $gray-100;
    border-radius: 10rem;
    background: $white;
  }

  a {
    padding-right: 60px;

    &:hover {
      background: $primary;
      color: $white;
    }
  }

  + .breadcrumb-item {
    margin-left: -40px;

    &::before {
      display: none;
    }

  }
}

}