@mixin bread-crumb-parent(
  $bg-color: #F8FAFC,
  $padding: $base-padding $base-padding,
  $radius: $base-btn-border-radius
) {
  width: max-content;
  font-size: 1.45rem;
  display: flex;
  align-items: center;
  gap: .8rem;
  border-radius: $base-border-radius;
  flex-wrap: wrap;
  flex-direction: row;
  padding: 1.2rem 1.6rem;
  background-color: $bg-color;

  .crumb-step {
    font-size: 1.4rem;
    transition: all .3s;
    color: #020202;
    cursor: pointer;
    text-transform: capitalize;
    cursor: pointer;
  }

  svg{
    width: 1.4rem;
    height: 1.4rem;
    color: #020202;
   fill: #020202;
   display: inline-block;
   transform: translateY(.2rem)
  }
}

.bread-crumb-parent {
  @include bread-crumb-parent;

  @each $key, $val in $colors {
    .crumb-step-active__#{$key} {
      color: $val;
    //   cursor: default;
      font-weight: 800;
    }
  }

  @each $key, $val in $colors {
    .crumb-arrow__#{$key} {
      color: $val;
      fill: $val;
    }
  }
}