/**
 * Breadcrumbs Component
 *
 * Based on the existing breadcrumbs from GOV.UK Elements, re-implemented
 * using BEM, allowing for an `inverse` modifier (e.g. against a masthead), with
 * structured data markup, and allowing for the 'current page' to be included
 * as the last element in the breadcrumb.
 *
 * Notes:
 *
 * - Link the current page to the same place as your skip link (e.g. #main) –
 *   this means that it is included by screen readers but is referred to as a
 *   'same page' link, and clicking it does not reload the page.
 * - You can test the structured data using Google's structured data testing
 *   tool: https://search.google.com/structured-data/testing-tool
 *
 * Example Usage:
 *
 * <nav class="breadcrumbs" aria-label="Breadcrumbs">
 *   <ol itemscope itemtype="http://schema.org/BreadcrumbList">
 *     <li class="breadcrumbs__item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
 *       <a href="https://www.gov.uk/service-toolkit#components" itemprop="item"><span itemprop="name">Components</span></a>
 *     </li>
 *     <li class="breadcrumbs__item breadcrumbs__item--active" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
 *       <a href="#main" itemprop="item"><span itemprop="name">Product Page</span></a>
 *     </li>
 *   </ol>
 * </nav>
 */

.breadcrumbs {
  @extend %site-width-container;
  @include core-16($line-height: (25 / 16), $line-height-640: 1.75);

  padding: $gutter-one-third 0;
  list-style: none;

  @include media(tablet) {
    margin-bottom: $gutter;
  }

  ol {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  &__item {
    display: inline-block;

    margin: 0;
    padding: 0 $gutter-one-quarter 0 (11px + $gutter-one-quarter);

    background-image: file-url('separator.png');
    background-repeat: no-repeat;
    background-size: 6px 11px;
    background-position: left center;

    white-space: nowrap;

    @include device-pixel-ratio(2) {
      background-image: file-url('separator-2x.png');
    }

    &,
    a:link,
    a:hover,
    a:active,
    a:visited {
      color: $black;
    }

    &--active {
      @include bold-16;

      a:link,
      a:visited {
        text-decoration: none;
      }
    }

    &:first-child {
      padding-left: 0;
      background-image: none;
    }
  }

  &--inverse {
    border-bottom: 1px $white solid;
    border-bottom-color: rgba($white, 0.25);

    .breadcrumbs__item {
      &--active,
      a:link,
      a:hover,
      a:active,
      a:visited {
        color: $white;
      }

      a:focus {
        color: $black;
      }
    }
  }
}