.breadcrumb {
  background-color: $breadcrumb-bg;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  &::-webkit-scrollbar {
    display: none;  /* Safari and Chrome */
  }
}


.breadcrumb-item {
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  scroll-snap-align: start;

  &.active {
    scroll-snap-align: end;

    a {
      //color: $breadcrumb-active-color;
      font-weight: $font-weight-bold;
    }
  }

  &.home a {
    @include media-breakpoint-down(sm) {
      @include icon('icon', $icons, 'home');
      width: 1.6em;
      white-space: nowrap;
      overflow: hidden;
      display: block;
    }
  }

  a {
    color: $breadcrumb-divider-color;

    &:hover, &:focus {
      text-decoration: none;
    }

  }

  &:hover, &:focus {
    &:before {
      color: $primary;

    }

    a {
      color: $breadcrumb-active-color;
    }
  }

  + .breadcrumb-item {

    @include icon('icon', $icons, 'angle-right');
    white-space: nowrap;

    &::before {
      line-height: inherit;
      margin-left: 0;
      margin-right: 0;

      @include media-breakpoint-up(sm) {
        margin-left: $breadcrumb-item-padding-x * .5;
        margin-right: $breadcrumb-item-padding-x * .5;

      }
    }

  }

}
