@import "../../src/scss/variables.scss";
@import "../../src/scss/mixins.scss";

.component-breadcrumb {
  display: block;
  padding-top: $header-height-mobile+60;
  margin-bottom: 20px;

  .items {
    display: block;
    list-style: none;
    padding: 20px 0 15px 0;
    border-bottom: 1px solid $black-alpha;

    .item {
      display: inline;
      @include font-style($font-sans, 'regular', $font-18);
      color: $gray;

      .link {
        color: $gray;
      }

      &:after {
        content: '>';
        padding: 0 4px;
        font-size: $font-14;
      }

      &:last-of-type {
        font-weight: bold;
        &:after {
          content: '';
        }
      }

    }
  }
}

@media (min-width: map-get($grid-breakpoints, 'md')) {
  .component-breadcrumb {
    padding-top: $header-height+60;
  }
}