// Built to work with:
// https://github.com/justintadlock/hybrid-breadcrumbs
// https://github.com/digitoimistodude/kpt

/* stylelint-disable selector-class-pattern, selector-max-combinators, selector-max-compound-selectors, selector-max-class, selector-max-specificity */
.breadcrumbs {
  background: transparent;
  margin-top: 0;
  margin-bottom: 4rem;
  text-align: left;
  line-height: 1;
  z-index: 100;
  border-bottom: 0;

  .breadcrumbs__title {
    @extend .screen-reader-text;
  }

  @media (min-width: 900px) {
    white-space: nowrap;

    * {
      white-space: nowrap;
    }
  }

  h2 {
    display: inline;
    margin-right: 0;
    position: relative;

    @media (max-width: $container-mobile) {
      position: relative;
      top: 1px;
    }

    &::after {
      text-indent: -9999px;
      overflow: hidden;
      text-decoration: none;
      text-align: start;
      font-size: 14px;
      height: 10px;
      width: 10px;
      background-image: url('../svg/breadcrumbs-arrow.svg');
      background-repeat: no-repeat;
      background-position: 0;
      background-size: inherit;
      position: relative;
      display: inline-flex;
      padding: 0;
      margin-left: 5px;
      margin-right: 5px;
      content: ' ';
      align-self: center;
    }
  }

  p,
  span,
  a,
  h2 {
    font-size: 14px;
    font-weight: 400;
    color: $color-paragraphs;

    @media (max-width: 600px) {
      font-size: 1.3rem;
    }
  }

  .breadcrumbs__trail {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 0;
    overflow: visible;
    line-height: 1.22;
    margin-top: 0;
    padding: 0;
    text-align: left;

    li {
      text-align: left;
      background: none;
      margin-bottom: 0;
      margin-top: 0;
      display: inline-block;
      padding-top: 0;
      padding-left: 5px;
      line-height: 1;
      position: relative;
      margin-right: 0;
      opacity: .3;
      font-weight: 500;
      transition: all $transition-duration;

      &:hover {
        opacity: .6;
      }
    }

    li:last-child {
      opacity: 1;
    }

    li:last-child::before {
      opacity: .3;
    }

    li.breadcrumbs__crumb--term {
      display: none;
    }

    .breadcrumbs__crumb {
      margin-right: 0;
      margin-left: 0;
      padding-left: 0;

      .breadcrumbs__title {
        display: none;
      }

      &::before {
        text-indent: -9999px;
        overflow: hidden;
        text-decoration: none;
        text-align: start;
        font-size: 14px;
        height: 10px;
        width: 10px;
        background-image: url('../svg/breadcrumbs-arrow.svg');
        background-repeat: no-repeat;
        background-position: 0;
        background-size: inherit;
        position: relative;
        display: inline-flex;
        padding: 0;
        margin-left: 12px;
        margin-right: 10px;
        content: ' ';
        align-self: center;
      }
    }

    .breadcrumbs__crumb--home {
      padding-left: 0;

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

      a > span {
        padding: 0;
      }

      abbr {
        @extend .screen-reader-text;
      }
    }

    .breadcrumbs__crumb--post,
    .breadcrumbs__crumb--post-type,
    .breadcrumbs__crumb--post-term {
      &::before {
        left: 0;
      }

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

    li:nth-child(2)::after {
      display: none;
    }

    a {
      color: $color-paragraphs;
      text-decoration: none;
    }

    a:hover {
      color: $color-paragraphs;
    }

    &:last-of-type::after {
      display: none;
    }
  }
}

.breadcrumbs .breadcrumbs__crumb--empty-label,
.breadcrumbs .breadcrumbs__trail li.breadcrumbs__crumb.breadcrumbs__crumb--empty-label {
  display: none;

  + .breadcrumbs__crumb::before {
    display: none;
  }
}
/* stylelint-enable selector-class-pattern */