$step-title-icon-active-color: $bz-theme-400;
$step-title-icon-complete-color:$bz-color-state-success;
$step-title-icon-incomplete-color: $bz-neutral-100;

.stepper{
  &__container {
  }
  &__nav-bar {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    background-color: $bz-neutral-200;
    padding: $bz-space-inset-l $bz-space-inset-xl;
  }
  &__step-title {
    display: flex;
    flex-direction: row;
    justify-items: flex-start;
    align-items: center;
    cursor:pointer;
    color: $bz-neutral-500;

    & span {
      font-size: x-small;
    }
    &--active{
      color: black;
      font-weight: bold;
    }
  }
  &__step-title-separator {
    border-top: 1px solid $bz-neutral-400;
    width: 3rem;
    height: 0;
    margin: 0 10px;
  }
  &__step-title-icon {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
    width: 2.4rem;
    min-width: 2.4rem;
    max-width: 2.4rem;

    height: 2.4rem;
    min-height: 2.4rem;
    max-height: 2.4rem;

    border-radius: 50%;
    background-color: $step-title-icon-incomplete-color;
    border: 1px solid $bz-neutral-400;
    color: $bz-neutral-500;
    &--active{
      background-color: $step-title-icon-active-color;
      border: 1px solid $step-title-icon-active-color;
      color: $bz-neutral-100;
    }
  }
  &__content {
    padding: $bz-space-inset-l $bz-space-inset-xl;
  }
}