@use 'sass:map';

$pi: 3.141592653589793;
$sizes: (
  s: 20,
  m: 48,
  l: 80,
  // legacy, @todo удалить со временем:
  small: 20,
  medium: 48,
  large: 80,
);
$durations: (
  s: 600ms,
  m: 750ms,
  l: 950ms,
  // legacy, @todo удалить со временем:
  small: 600ms,
  medium: 750ms,
  large: 950ms,
);

.spinner {
  display: block;
  .circle {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
  }
  @each $sizeKey, $size in $sizes {
    $diameter: $size - 2;
    $perimeter: $diameter * $pi;
    &.size-#{$sizeKey} {
      width: #{$diameter}px;
      height: #{$diameter}px;
      .circle {
        animation: dash-#{$sizeKey} map.get($durations, $sizeKey) linear infinite;
      }
      @keyframes dash-#{$sizeKey} {
        0% {
          stroke-dasharray:
            $perimeter * 0.125,
            $perimeter * 0.875;
          stroke-dashoffset: $perimeter * 0.25;
        }
        50% {
          stroke-dasharray:
            $perimeter * 0.5,
            $perimeter * 0.5;
        }
        100% {
          stroke-dasharray:
            $perimeter * 0.125,
            $perimeter * 0.875;
          stroke-dashoffset: -$perimeter + ($perimeter * 0.25);
        }
      }
    }
  }
}

// fallback (в IE не поддерживается CSS-анимация SVG)
@media all and (-ms-high-contrast: none) {
  @each $sizeKey, $size in $sizes {
    $diameter: $size - 2;
    $perimeter: $diameter * $pi;

    // IE11 only
    *::-ms-backdrop,
    .spinner {
      animation: rotate 2s linear infinite;
    }
    *::-ms-backdrop,
    .spinner.size-#{$sizeKey} .circle {
      stroke-dasharray:
        $perimeter * 0.75,
        $perimeter * 0.25;
      stroke-dashoffset: $perimeter * 0.25;
    }
  }
}

@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}