// 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, a11y/font-size-is-readable, a11y/no-display-none */
.breadcrumbs {
  background-color: transparent;
  border-bottom: 0;
  line-height: 1;
  margin-bottom: 4rem;
  margin-top: 0;
  text-align: left;
  z-index: 100;

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

  p,
  span,
  a,
  h2 {
    color: var(--color-paragraph);
    font-size: 14px;
    font-weight: var(--font-weight-regular);

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

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

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

      &:focus,
      &:hover {
        opacity: .6;
      }
    }

    li:last-child {
      opacity: 1;
    }

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

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

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

      .breadcrumbs__title {
        display: none;
      }

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

    .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: var(--color-paragraph);
      text-decoration: none;
    }

    &:focus,
    a:hover {
      color: var(--color-paragraph);
    }

    &: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 */