.progress {
  @apply w-full flex items-center;
  transition: opacity 350ms ease-out;
  transition-delay: 1s;
}

.progress--complete {
  opacity: 0;
}

.progress__loader {
  @apply mr-4;
  color: black;
}

.progress__loader .loading__spinner {
  height: 20px;
  width: 20px;
  border-width: 2px;
  border-color: white;
  border-right-color: transparent;
}

.progress__steps {
  position: relative;
  height: .75rem;
}

.progress__step {
  @apply absolute w-full text-xs text-white;
  min-width: max-content;
  opacity: 0;
  transform: translateY(10px);
  /** set transitions **/
  transition-property: opacity, transform;
  transition: all 350ms ease-in;
}

.progress__step--active {
  opacity: 1;
  transform: translateY(0);
}

.progress svg circle:first-child {
  stroke-opacity: .1;
}