$balls-stepper-gray: #c7ced7;
$balls-stepper-text-gray: #a9a9a9;

.balls-stepper{
  margin: rem-calc(0 50);
  &__ball{
    height: 38px;
    width: 38px;
    border-radius: 100%;
    position: relative;
    border: solid  $primary-color;
    &--selected{
      background-color: $primary-color;
      color: $white;
    }
    &--pending{
      border: solid  $balls-stepper-gray;
      color: $balls-stepper-text-gray;
    }
    &--success{
      background-color: $success-color;
      border: solid $success-color;
      color: $white;
      &:before {
        font-family: "dripicons-v2";
        font-weight: bold;
        font-size: rem-calc(23);
        content: "\53";
      }
    }
  }
  &__title {
    position: absolute;
    top: 150%;
    width: rem-calc(150);
    text-overflow: ellipsis;
    text-align: center;
    height: rem-calc(32);
    &--selected {
      color: $primary-color;
    }
    &--pending {
      color: $balls-stepper-gray;
    }
  }
  &__bar {
    height: 5px;
    border-radius: 2.5px;
    &--pending {
      margin: rem-calc(0 10);
      background-color: #c7ced7;
    }
    &--selected {
      background-color: #0077e2;
      transition: width 1s;
    }
  }
}