/**
** BREADCRUMB
**
** EXAMPLE:
** <div class="c-breadcrumb">
**  <ol class="c-breadcrumb__list">
**    <li class="c-breadcrumb__item c-breadcrumb__item--home">
**      <a href="#"><svg home /></a>
**    </li>
**    <li class="c-breadcrumb__item">
**      <a href="#">Medieuttrykk og mediesamfunnet</a>
**    </li>
**  </ol>
** </div>
**/

.c-breadcrumb {
  max-width: 100%;
  @include inuit-font-size(18px);
  display: block;
}
.c-breadcrumb__list {
  display: inline-block;
  padding-left: 0;
  margin-bottom: 0;
  margin-top: 0;
  list-style: none;
}
.c-breadcrumb__item {
  font-weight: $font-weight-normal;
  padding-right: $spacing--small / 2;
  margin-bottom: 0;
  margin-left: 0;
  display: block;

  &:not(.c-breadcrumb__item--home) {
    .c-icon {
      width: 14px;
      height: 14px;
      margin-left: $spacing--small/2;
      margin-top: -1px;
    }
  }

  @include mq(tablet) {
    display: inline-block;
  }

  a {
    text-decoration: none;
    color: $primary-color;

    &:hover,
    &:active,
    &:focus {
      color: $primary-color;
    }
  }

  &:before {
    display: none;
  }

  &:first-child {
    a {
      box-shadow: none;
      border-bottom: none;
    }
  }
  &:last-child {
    .c-icon {
      display: none;
    }
  }
}
.c-breadcrumb__item--home {
  a {
    border-bottom: none;
  }

  @include mq(tablet) {
    padding-right: $spacing--small;

    &:after {
      padding-left: $spacing--small;
      content: '|';
      @include inuit-font-size(14px);
      color: $primary-color;
    }
  }
}