.schedule-progress {
  --progress-bar-height: 0.3rem;
  --progress-upcoming-step-size: 0.8rem;
  --progress-completed-step-size: 1.4rem;

  --progress-track-color: var(--bs-gray-300);
  --progress-step-upcoming-color: var(--bs-gray-300);
  --progress-step-completed-color: rgba(39, 174, 96, 1);
  --progress-step-active-color: rgba(39, 174, 96, 1);

  --progress-bar-corner-radius: calc(
    var(--progress-upcoming-step-size) + ((var(--progress-bar-height) - var(--progress-upcoming-step-size)) / 2)
  );

  position: relative;
}

.progress-container {
  display: flex;
  position: relative;
  min-height: var(--progress-completed-step-size);
  top: calc((var(--progress-completed-step-size) - var(--progress-bar-height)) / 2);
}

/* progress bar background */
.progress-track {
  position: absolute;
  width: 100%;
  height: var(--progress-bar-height);
  background-color: var(--progress-track-color);
  border-radius: var(--progress-bar-corner-radius);
  z-index: -1;
  top: 0rem;
}

/* step marker container */
.progress-step {
  position: relative;
  display: flex;
}

/* step marker future */
.progress-step:before {
  content: '';
  position: relative;
  top: calc((var(--progress-bar-height) - var(--progress-upcoming-step-size)) / 2);
  left: calc(0rem - ((var(--progress-bar-height) - var(--progress-upcoming-step-size)) / 2));
  width: var(--progress-upcoming-step-size);
  height: var(--progress-upcoming-step-size);
  background: var(--progress-step-upcoming-color);
  border-radius: 100%;
  margin: 0 0 0 auto;
}

/* step marker active */
.progress-step.is-active:before {
  background: var(--progress-step-active-color);
  animation: pulse 2s infinite;
}

/* step marker complete */
.progress-step.is-complete:before {
  content: '\2713';
  top: calc(0rem - ((var(--progress-completed-step-size) - var(--progress-bar-height)) / 2));
  left: calc(
    (0rem - ((var(--progress-bar-height) - var(--progress-upcoming-step-size)) / 2)) +
      ((var(--progress-completed-step-size) - var(--progress-upcoming-step-size)) / 2)
  );
  color: var(--progress-step-upcoming-color);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--progress-completed-step-size);
  height: var(--progress-completed-step-size);
  background: var(--progress-step-completed-color);
}

/* progress bar */
.progress-step.is-complete:after {
  content: '';
  position: absolute;
  width: 100%;
  height: var(--progress-bar-height);
  background: rgba(39, 174, 96, 0.4);
  z-index: -1;
}

/* progress bar left end */
.progress-step.is-complete.is-first:after {
  border-radius: var(--progress-bar-corner-radius) 0 0 var(--progress-bar-corner-radius);
}

.progress-step.is-active.is-first:after {
  border-radius: var(--progress-bar-corner-radius);
}

/* progress bar tip */
.progress-step.is-active:after {
  content: '';
  position: absolute;
  width: 100%;
  border-radius: 0 var(--progress-bar-corner-radius) var(--progress-bar-corner-radius) 0;
  height: var(--progress-bar-height);
  background: rgba(39, 174, 96, 0.4);
  z-index: -1;
  animation: nextStep 1s;
}

.progress-step.is-last.is-complete:after {
  border-radius: 0 var(--progress-bar-corner-radius) var(--progress-bar-corner-radius) 0;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(39, 174, 96, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(39, 174, 96, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(39, 174, 96, 0);
  }
}

@keyframes nextStep {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}