@import "./var";
.#{$prefix}breadcrumb {
  font-size: 0;
  vertical-align: middle;
  display: inline-block;
  color: $color-text;

  &__item {
    display: inline-block;
    vertical-align: middle;
    font-weight: 400;

    &::before {
      font-size:$breadcrumb-font-size;
      color: $breadcrumb-color-text;
      content: "/ ";
      padding: 0 8px;
      display: inline-block;
    }

    &:first-of-type {
      &::before {
        display: none;
      }
    }
    .#{$prefix}breadcrumb__item-title,
    a,span,strong {
      font-size: $breadcrumb-font-size-l;
      color: $breadcrumb-color-text;
    }
    .is-current{
      color: $breadcrumb-color-text-weight;
      font-weight: $breadcrumb-current-text-weight;
    }
  }
}

.#{$prefix}breadcrumb.#{$prefix}breadcrumb--fz-large{
  .#{$prefix}breadcrumb__item{
    ::before{
      font-size: $breadcrumb-font-size-xl;
    }
    .#{$prefix}breadcrumb__item-title,
    a,span,strong{
      font-size: $breadcrumb-font-size-xl;
    }
  }
}