// @page Pattern Library/Components
// @name Breadcrumbs
//
// @description
//  Breadcrumbs are used to provide signposting of a users location and to enable quick navigation around the site. They are only to be used as a secondary means of navigation however. Pages should also be navigable through other means.
//
// @markup
//   <ul class="us-crumbs">
//     <li class="us-crumbs__item"><a href="/" class="us-crumbs__link">uSwitch.com</a></li>
//     <li class="us-crumbs__item"><a class="us-crumbs__link" href="http://www.uswitch.com/credit-reports/">Credit report</a></li>
//     <li class="us-crumbs__item"><a class="us-crumbs__link" href="http://www.uswitch.com/credit-reports/guides/">Credit reports guides</a></li>
//     <li class="us-crumbs__item">Statutory credit reports</li>
//   </ul>

.us-crumbs {
  @extend %reset-box-model;
  @extend %clearfix;
  @extend %small-font;
  margin-top: 1em;
  margin-bottom: 1em;
  list-style: none;
}

.us-crumbs__item {
  @extend %float-left;
  margin-bottom: 0;
  color: $c-darker-grey;

  &:before {
    display: inline-block;
    margin: 0 .35em;
    font-size: 1.4em;
    font-weight: normal;
    content: "\203A";
    vertical-align: text-top;
  }

  &:first-child:before {
    width: 0;
    margin: 0;
    color: transparent;
  }

  &:last-child {
    font-weight: bold;
    color: $c-uswitch-navy;

    &:before {
      color: $c-darker-grey;
    }
  }
}

.us-crumbs__link {
  color: $c-darker-grey;
  text-decoration: none;
  
  &:visited {
    color: $c-darker-grey;
  }

  &:hover {
    color: $c-darker-grey;
    text-decoration: underline;
  }
}