accounts-frontend/packages/app/components/ui/stepper/stepper.scss

@import '~app/components/ui/colors.scss';

.steps {
  height: 40px;
  display: flex;
  align-items: center;
}

.step {
  position: relative;
  text-align: right;
  width: 100%;

  height: 4px;
  background: #d8d5ce;

  &:first-child {
    width: 12px;
  }

  &:before {
    content: '';
    display: block;

    position: absolute;
    height: 4px;
    left: 0;
    right: 100%;
    top: 50%;
    margin-top: -2px;

    background: #aaa;
    transition: 0.4s ease 0.1s;
  }

  &:after {
    content: '';
    display: inline-block;
    position: relative;
    top: -7px;
    z-index: 1;

    width: 12px;
    height: 12px;
    border-radius: 100%;
    box-sizing: border-box;

    background: #aaa;
    border: 2px solid #aaa;
    transition: background 0.4s ease,
      border-color 0.4s cubic-bezier(0.19, 1, 0.22, 1); // easeOutExpo
  }
}

.activeStep {
  &:before {
    right: 0;
    transition-delay: unset;
  }

  &:after {
    transition-delay: 0.3s;
  }
}

.greenSteps {
  .activeStep {
    &:after {
      background: $green;
      border-color: darker($green);
    }
  }
}

.violetSteps {
  .activeStep {
    &:after {
      background: $violet;
      border-color: darker($violet);
    }
  }
}