// Breadcrumbs
//
//  - Place the breadcrumb in a `<nav>` element when you can.
//  - If you do not use a `<nav>` element, you need to add `role="navigation"` to the markup. <strong>Note:</strong> this role is implied when you use the `<nav>` element so it is a bit redundant to use both at the same time.
//  - The markup includes an `aria-label="breadcrumbs"` to describe the type of navigation.
//  - Add `aria-current="page"` to the link that points to the current page. This will tell assistive technology (AT) devices that the focused link is pointing to the current page.
//
// <section data-action="aria-toggle" class="atblock"><h3 class="atblock__title"><a href="#breadcrumbs_res">Resources</a></h3><div id="breadcrumbs_res" class="atblock__panel"><ul><li><a href="https://w3c.github.io/aria/" target="_blank">Accessible Rich Internet Applications (WAI-ARIA) 1.1</a></li><li><a href="http://tink.uk/using-the-aria-current-attribute/" target="_blank">Using the aria-current attribute</a></li></ul></div></section>
//
//
//
// <section data-action="aria-toggle" class="atblock"><h3 class="atblock__title"><a href="#breadcrumbs_guide">WCAG 2.1 Guidelines</a></h3><div id="breadcrumbs_guide" class="atblock__panel guidelines"><p><a href="https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=131#navigation-mechanisms-location" target="_blank">2.4.8 Location</a> - Information about the user's location within a set of Web pages is available. (Level AAA)</p></div><div class="markup"></div></section>
//
//
//
// Markup: breadcrumbs.twig
//
// Style guide: Navigation.breadcrumbs

// Import site utilities.
@import '../../global/utils/init';

.breadcrumb {
  padding: $padding-sm;
  margin-bottom: $padding-sm;
  clear: both;
  list-style: none;

  .breadcrumb-item {
    float: left;
    list-style: none;

    &::after {
      display: inline-block;
      padding-right: $padding-xsm;
      padding-left: $padding-xsm;
      color: $color-midnight;
      font-weight: normal;
      content: ' / ';
    }

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

    a[aria-current='page'] {
      color: $color-midnight;
    }
  }
}
