@use '@style/theme/index.scss' as theme;
@use '@style/theme/index.scss' as global;
@use 'sass:math';
@use 'sass:string';
@use '@components/spin/style/token.scss' as *;

$dot-prefix-cls: string.unquote('#{theme.$prefix}-dot-loading');

.#{$dot-prefix-cls} {
  position: relative;
  display: inline-block;
  width: $spin-dot-size-width * 7;
  height: $spin-dot-size-width;
  transform-style: preserve-3d;
  perspective: 200px;

  &-item {
    position: absolute;
    top: 0;
    left: 50%;
    width: $spin-dot-size-width;
    height: $spin-dot-size-width;
    background-color: $spin-dot-color-icon_default;
    border-radius: global.$radius-circle;
    transform: translateX(-50%) scale(0);
    animation: $dot-prefix-cls 2s theme.$transition-timing-function-linear infinite forwards;

    &:nth-child(2) {
      background-color: $spin-dot-color-icon_second;
      animation-delay: 400ms;
    }

    &:nth-child(3) {
      background-color: $spin-dot-color-icon_third;
      animation-delay: 800ms;
    }

    &:nth-child(4) {
      background-color: $spin-dot-color-icon_forth;
      animation-delay: 1200ms;
    }

    &:nth-child(5) {
      background-color: $spin-dot-color-icon_last;
      animation-delay: 1600ms;
    }
  }
}

@keyframes #{$dot-prefix-cls} {
  @for $value from 1 through 36 {
    $percent: math.percentage(math.div($value - 1, 36));

    $radius: 280%;
    $angle: math.div(math.$pi, 180) * $value * 10;
    $xOffset: math.sin($angle) * $radius * -1;
    $zOffset: math.cos($angle) * -1px;
    $scaleOffset: (1 - math.cos($angle)) * 0.75 + 0.5;

    #{$percent} {
      transform: string.unquote('translate3D(#{$xOffset}, 0, #{$zOffset}) scale(#{$scaleOffset})');
    }
  }
}