@import './variables';

.underlay {
  stroke: $progress-circular-underlay-stroke;
  z-index: 1;
}

.overlay {
  stroke: currentColor;
  z-index: 2;
  transition: $progress-circular-overlay-transition;
}

svg {
  width: 100%;
  height: 100%;
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 0;
}

.s-progress-circular {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
  justify-content: center;
  align-items: center;

  &.indeterminate {
    svg {
      animation: $progress-circular-rotate-animation;
      transform-origin: center center;
      transition: $process-circular-intermediate-svg-transition;
    }

    .overlay {
      animation: $progress-circular-rotate-dash;
      stroke-linecap: round;
      stroke-dasharray: 80, 200;
      stroke-dashoffset: 0;
    }
  }
}

.s-progress-circular__content {
  align-items: center;
  display: flex;
  justify-content: center;
}

@keyframes progress-circular-dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }

  50% {
    stroke-dasharray: 100, 200;
    stroke-dashoffset: -15px;
  }

  100% {
    stroke-dasharray: 100, 200;
    stroke-dashoffset: -125px;
  }
}

@keyframes progress-circular-rotate {
  100% {
    transform: rotate(360deg);
  }
}