@import "../bootstrap-core/breadcrumb";
.breadcrumb-item {
  &.active {
    font-weight: $breadcrumb-active-font-weight;
  }
  + .breadcrumb-item::before {
    width: $breadcrumb-divider-width;
    height: $breadcrumb-divider-height;
    vertical-align: middle;
  }

}


@include media-breakpoint-down(xs) {
  .breadcrumb {
    padding:0;
    margin-bottom: 0;
  }
  .breadcrumb-item {
    display: none;

    + .breadcrumb-item {
      &::before {
        display: none;
      }

      padding-left: 0;
    }

    &:nth-last-child(2) {
      display: inline-block;
      padding: $breadcrumb-padding-y 0;
      margin-bottom: $breadcrumb-margin-bottom;

      &::before {
        display: inline-block;
        padding-right: $breadcrumb-item-padding;
        color: $breadcrumb-divider-color;
        content: $breadcrumb-back-icon;
        width: $breadcrumb-divider-width;
        height: $breadcrumb-divider-height;
        vertical-align: middle;
      }
    }
  }
}

.breadcrumb-light {
  .breadcrumb-item {
    + .breadcrumb-item {

      &::before {
        color: $breadcrumb-divider-color-light;
        content: str-replace($breadcrumb-divider, str-replace(#{'fill=\'' + $breadcrumb-divider-color + '\''}, "#", "%23"), str-replace(#{'fill=\'' + $breadcrumb-divider-color-light + '\''}, "#", "%23"));
      }
    }
    &.active {
      color: $breadcrumb-active-color-light;
    }
    a {
      color: $breadcrumb-active-color-light;
      @include hover {
        color: $breadcrumb-active-color-light;
      }
    }
    @include media-breakpoint-down(xs) {
      &:nth-last-child(2) {
        &::before {
          content: str-replace($breadcrumb-back-icon, str-replace(#{'fill=\'' + $breadcrumb-divider-color + '\''}, "#", "%23"), str-replace(#{'fill=\'' + $breadcrumb-divider-color-light + '\''}, "#", "%23"));
        }
      }
    }

  }
}