.breadcrumbs {
  padding: 1.2rem 1.3rem 0.4rem;
  margin-bottom: 4rem;

  border-bottom: 1px solid #F2F2F2;

  &--post {
    border-bottom: none;

    .breadcrumbs__list {
      justify-content: center;
    }
  }

  @include media-breakpoint-down(sm) {
    margin-bottom: 2rem;
  }
}

.breadcrumbs__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  list-style: none;

  font-size: 1.4rem;
  line-height: 1.2;
  color: $dark;

  @include media-breakpoint-down(sm) {
    font-size: 1.2rem;
  }
}

.breadcrumbs__item {
  position: relative;
  white-space: nowrap;
  line-height: 1;
  margin-right: 0.8rem;
  margin-bottom: 0.8rem;

  &:last-child {
    margin-right: 0;
  }

  &:not(:first-child) {
    padding-left: 2.2rem;

    &::before {
      content: "";
      display: block;
      width: 16px;
      height: 16px;

      background: url("/shop/images/breadcrumbs-arrow.svg") no-repeat center;
      background-size: cover;

      position: absolute;
      top: 50%;
      left: 0;
      z-index: 1;

      transform: translateY(-50%);
    }

    @include media-breakpoint-down(sm) {
      padding-left: 2rem;
    }
  }

  @include media-breakpoint-down(sm) {
    margin-right: 0.6rem;
  }

  a {
    color: inherit;
    text-decoration: none;
  }
}

.breadcrumbs__link {
  display: block;
  color: rgba(#606060, .5);
  text-decoration: none;

  &:not(span):hover {
    text-decoration: underline;
  }
}