.breadcrumb {
  @include media-breakpoint-down(xs) {
    padding: 0.5rem;
  }
  &-wrapper {
    border-radius: 0.25rem;
    box-shadow: 0px 0px 8px 0 rgba(0, 0, 0, 0.16);
    background-color: white;
    display: flex;
    align-items: center;
    overflow: hidden;
    margin-top: -2rem;
    .icon {
      padding: 1.125rem;
      background-color: $gray-80;
      [class^="ic-"],
      [class*=" ic-"] {
        @include rfs(20px);
        color: $primary;
      }
      @include media-breakpoint-down(md) {
        padding: 1rem;
      }
    }
  }
  &-item {
    color: $gray-300;
    + .breadcrumb-item {
      @include media-breakpoint-down(sm) {
        padding-left: 0.5rem;
        &::before {
          padding-right: 0.5rem;
        }
      }
    }
  }
}