@import '../../styles/variables.less';

@scale-circle-prefix: ~'@{so-prefix}-scale-circle';

.@{scale-circle-prefix} {
  @circleCount: 12;
  @animationDuration: 1.2s;
  @keyframesScale: ~'@{scale-circle-prefix}-scale';
  @keyframesFade: ~'@{scale-circle-prefix}-fade';

  @keyframes @keyframesScale {
    0%,
    80%,
    100% {
      transform: scale3d(0, 0, 1);
    }

    40% {
      transform: scale3d(1, 1, 1);
    }
  }

  @keyframes @keyframesFade {
    0%,
    39%,
    100% {
      opacity: 0;
    }

    40% {
      opacity: 1;
    }
  }

  position: relative;
  margin: auto;

  &-item {
    position: absolute;
    top: 10%;
    left: 10%;
    width: 80%;
    height: 80%;

    div {
      border-radius: 100%;
    }
  }

  &-scale svg,
  &-scale div {
    animation: @keyframesScale @animationDuration infinite ease-in-out both;
  }

  &-fade svg,
  &-fade div {
    animation: @keyframesFade @animationDuration infinite ease-in-out both;
  }

  .loop(@i) when (@i > 1) {
    .loop(@i - 1);

    .@{scale-circle-prefix}-item:nth-child(@{i}) {
      transform: rotateZ((360deg / @circleCount) * (@i - 1));

      svg,
      div {
        animation-delay: -@animationDuration + ((@animationDuration / @circleCount) * (@i - 1));
      }
    }
  }

  .loop(@circleCount);
}