/* @file
 * Breadcrumbs
 */

.breadcrumb-nav {
  ol {
    margin: 0;
    padding: 0 .5em;
    li {
      display: inline-block;
      padding: 0;
      list-style: none;
      vertical-align: middle;
      line-height: 16px;
      color: color($primary, 'lighten-4');
      font-size: 16px;
      a,
      span {
        display: inline-block;
        overflow: hidden;
        vertical-align: middle;
        text-overflow: ellipsis;
        line-height: 16px;
        white-space: nowrap;
        color: color($primary, 'lighten-4');
        &.current.url-segement-title {
          text-transform: capitalize;
        }
      }
      span {
        color: $white;
      }
      div {
        display: inline;
      }
      &:first-child {
        a {
          visibility: hidden;
          max-width: 20px;
          &::before {
            @extend .material-icons;

            display: inline-block;
            float: left;
            visibility: visible;
            text-indent: 0;
            content: 'home';
          }
        }
      }
      &::before {
        @extend .material-icons;

        margin: 0 10px 0 8px;
        vertical-align: middle;
        line-height: 16px;
        color: color($primary, 'lighten-4');
        font-size: 23px;
        content: 'keyboard_arrow_right';

        -webkit-font-smoothing: antialiased;
      }
      &:first-child::before {
        display: none;
      }
      &:last-child a,
      &:last-child {
        color: color($utility, 'lighten-4');
      }
    }
  }
}

.breadcrumb-nav ol li a {
  visibility: hidden;
  max-width: 15px;
  &::before {
    display: inline-block;
    visibility: visible;
    content: '...';
  }
}

.breadcrumb-nav ol>*:first-child a {
  display: inline-block !important;
}

@media #{$small-and-down} {
  .breadcrumb-nav ol>*:nth-last-child(-n+2) a {
    visibility: visible;
    max-width: 60px;
    &::before {
      display: none;
    }
  }
}

@media #{$medium-and-up} {
  .breadcrumb-nav ol>*:nth-last-child(-n+4) a {
    display: inline-block;
    visibility: visible;
    max-width: 100px;
    &::before {
      display: none;
    }
  }
}

@media #{$large-and-up} {
  .breadcrumb-nav ol>*:nth-last-child(-n+6) a {
    visibility: visible;
    max-width: 170px;
    &::before {
      display: none;
    }
  }
}

// If breadcrumbs are in the First item in the header region
.region-header {
  .block-system-breadcrumb-block {
    margin: 15px 0 0;
    .breadcrumb-nav ol {
      padding: 0;
      li {
        line-height: 13px;
        font-size: 13px;
        a,
        span {
          color: color($utility, 'lighten-2');
        }
        &::before {
          margin: 0 4px;
          line-height: 13px;
          color: color($utility, 'lighten-2');
        }
        &:last-child a,
        &:last-child span {
          color: $white;
        }
      }
    }
    &~.block-page-title-block {
      // reduce margin if breadcrumbs are above it
      h1.page-title {
        margin-top: .7rem;
      }
    }
  }
}