@import 'settings';

// Breadcrumbs
//
// Breadcrumbs are a good way to display your current location.
// This is usually used when you have multiple layers of content. They are hidden on mobile screens.
//
// markup: breadcrumb.twig
//
// Weight: 2
//
// Style guide: molecules.navigation.breadcrumb

.region--breadcrumb {
  display: none;

  @include for-tablet-landscape-up {
    display: block;
    background-color: #fff;
  }
}

.breadcrumb {
  padding: 8px 1rem;
  list-style: none;
  font-size: $font-size-base;
  line-height: 1.625rem;
  margin-bottom: 0;

  > li {
    display: inline-block;
  }

  a {
    display: inline-block;
    font-weight: 400;

    &:hover {
      text-decoration: underline;
    }

  }

}
