// breadcrumb trail colour iteration
$breadcrumbColors: lighten($gray-100, 10%), lighten($gray-200, 15%), lighten($gray-200, 10%), lighten($gray-200, 7%), $gray-500;
@for $i from 1 through length($breadcrumbColors) {
  $breadcrumbColors: append($breadcrumbColors, darken(nth($breadcrumbColors, $i), 25));
}
$breadcrumbColorsLength: length($breadcrumbColors);

.breadcrumbs-wrapper {
  position: absolute;
  margin-top: -25px;
  z-index: 10;
  left: 0;
  right: 0;
}

.banner-cta-content .breadcrumbs-wrapper {
  margin-top: 23px;
}

.breadcrumbs {
  list-style: none;
  display: flex;

  li {

    span,
    a {
      @include cachet();
      display: block;
      float: left;
      min-height: 50px;
      text-align: center;
      padding: 10px 20px 10px 50px;
      position: relative;
      margin: 0;
      font-size: 20px;
      text-decoration: none;

      // first level
      &:after {
        content: "";
        border-top: 25px solid transparent;
        border-bottom: 25px solid transparent;
        border-left: 25px solid $gray-100;
        position: absolute;
        right: -25px;
        top: 0;
        z-index: 1;
      }

      &:before {
        content: "";
        border-top: 25px solid transparent;
        border-bottom: 25px solid transparent;
        border-left: 25px solid $white;
        position: absolute;
        left: 0;
        top: 0;
      }
    }

    // parent breadcrumb (links)
    // iterate and darken the bg colours
    @for $i from 1 through $breadcrumbColorsLength {
      &:nth-of-type(1n+#{$i}) {
        a {
          /*color: $cyan;*/
          color: $teal;
          background-color: nth($breadcrumbColors, $i);

          &:after {
            border-left-color: nth($breadcrumbColors, $i);
          }
        }
      }
    }

    // active breadcrumb (title)
    span {
      color: $gray-500;
      background: lighten($gray-200, 5%);

      &:after {
        border-left-color: lighten($gray-200, 5%);
      }
    }

    // first child remove arrow before
    &:first-child a {
      padding-left: 30px;

      &:before {
        display: none;
      }
    }
  }
}

body.without-banner {
  .breadcrumbs-wrapper {
    position: initial;
  }
  &.page-node-type-class {
    .breadcrumbs-wrapper {
      margin-top: -225px;
    }
  }
}

.page-node-type-camp {
  .breadcrumbs-wrapper {
    margin-top: -117px;
  }
}
