// Site wide breadcrumbs
//
// Styleguide Breadcrumbs

.breadcrumbs__item {
  @include body(14, 18);
  @include inline-block;
  @include visually-hidden;
  margin-bottom: 0;

  &:last-child {
    @include inline-block;
    position: relative;
    overflow: visible;
    width: auto;
  }

  @include respond-to($mq-m) {
    @include inline-block;
    position: relative;
    overflow: visible;
    width: auto;
  }

  @include respond-to($mq-l) {
    @include body(16, 24);
  }
}

.breadcrumbs__divider {
  @include body(16, 16);
  color: $breadcrumbs-divider-color;
  position: relative;
  top: 1px;

  &:before {
    padding: 0 6px 0 0;
    content: '\3008';

    @include respond-to($mq-m) {
      padding: 0 0 0 6px;
      content: '\3009';
    }
  }
}

// Site wide breadcrumbs
//
// Styleguide Breadcrumbs

//.breadcrumbs {
//
//  ul {
//    height: 24px;
//  }
//}

.breadcrumbs__item {
  @include body(14, 18);
  @include inline-block;
  margin-bottom: 0;

  @include respond-to($mq-l) {
    @include body(16, 24);
  }
}

@include respond-to($mq-xs, $mq-m) {
  .breadcrumbs__item:not(:last-child) {
    @include visually-hidden;
  }
}

.breadcrumbs__divider {
  @include body(16, 16);
  color: $breadcrumbs-divider-color;
  position: relative;
  top: 1px;

  &:before {
    padding: 0 6px 0 0;
    content: '\3008';

    @include respond-to($mq-m) {
      padding: 0 0 0 6px;
      content: '\3009';
    }
  }
}

Refactor visually hidden class toggle
Refactor visually hidden class toggle
