$circular-progress-indicator: #{$prefix}-circular-progress-indicator;
$wrapper: #{$circular-progress-indicator}-wrapper;
$track: #{$circular-progress-indicator}__track;
$label: #{$circular-progress-indicator}__label;
$arc-white: #{$circular-progress-indicator}__arc-white;
$arc-gray: #{$circular-progress-indicator}__arc-gray;
$arc-blue: #{$circular-progress-indicator}__arc-blue;

.#{$wrapper} {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: fit-content;
  margin: 0;
}

.#{$label} {
  margin-top: space(s);
}

.#{$track} {
  stroke: color(neutral, 100);
}

.#{$arc-blue} {
  transform-origin: 33px 33px;
  animation: rotation1 2.7s ease-out infinite;
}

.#{$arc-white} {
  transform-origin: 33px 33px;
  animation: rotation2 2.7s ease-out infinite;
}

.#{$arc-gray} {
  transform-origin: 33px 33px;
  animation: rotation2 2.7s ease-out infinite;
}

@keyframes rotation1 {
  0% {
    stroke: url(#grad1);
    transform: rotate(0deg);
  }
  49% {
    stroke: url(#grad1);
  }
  50% {
    stroke: #5594e2;
    transform: rotate(450deg);
  }
  51% {
    stroke: url(#grad2);
  }
  100% {
    stroke: url(#grad2);
    transform: rotate(0deg);
  }
}

@keyframes rotation2 {
  0% {
    transform: rotate(0deg);
  }
  20% {
    transform: rotate(0deg);
  }
  40% {
    transform: rotate(90deg);
  }
  60% {
    transform: rotate(90deg);
  }
  80% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0deg);
  }
}