/* Breadcrumbs */

.breadcrumb {
    border: $border-width solid $border-color;

    .breadcrumb-item {
      font-size: $breadcrumb-font-size;

      &.active {
        color: $gray;
      }
    }

    &.breadcrumb-custom {
      padding: $breadcrumb-custom-padding-y $breadcrumb-custom-padding-x;
      border-color: $breadcrumb-item-bg;

      .breadcrumb-item {
        font-size: $breadcrumb-font-size;
        background: $breadcrumb-item-bg;
        padding: $breadcrumb-custom-item-padding-y
          $breadcrumb-custom-item-padding-x;
        color: $breadcrumb-custom-item-color;
        display: flex;
        vertical-align: top;

        &:last-child {
          background: transparent;
        }

        &:before {
          content: "";
        }

        a {
          position: relative;
          color: inherit;
          border: 1px solid $breadcrumb-item-bg;
          display: inline-block;
          vertical-align: top;

          &:before,
          &:after {
            position: absolute;
            top: -9px;
            width: 0;
            height: 0;
            content: "";
            border-top: 21px solid transparent;
            border-bottom: 21px solid transparent;
          }

          &:before {
            right: -22px;
            z-index: 3;
            border-left-color: $breadcrumb-item-bg;
            border-left-style: solid;
            border-left-width: 12px;
          }

          &:after {
            border-top: 21px solid transparent;
            border-bottom: 22px solid transparent;
            border-left: 12px solid $white;
            top: -9px;
            right: -23px;
          }
        }

        span {
          display: inline-block;
          vertical-align: top;
        }

        &.active {
          color: rgba($body-color, 0.8);
        }
      }
    }

    &.bg-success,
    &.bg-dark,
    &.bg-danger,
    &.bg-warning,
    &.bg-primary,
    &.bg-info {
      border: none;

      .breadcrumb-item {
        color: $white;

        &:before {
          color: inherit;
        }

        a,
        span {
          color: inherit;
        }
      }
    }
  }

  /* inverse breadcrumb */
  @each $color, $value in $theme-colors {
    .bg-inverse-#{$color} {
      @include breadcrumb-inverse-variant($value);
    }
  }