@import (reference) '../../theme/index.less';

// These sizes must match SPINNER_SIZES
@xs-spinner: 16;
@small-spinner: 32;
@medium-spinner: 52;
@large-spinner: 72;

.small,
.xs,
.medium {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.large {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.spinner {
  box-sizing: border-box;
  stroke: @orange-01;
  stroke-linecap: round;
  transform-origin: center;
  transform: rotate(0);
}
.spinner-xs {
  animation: xs-line 2s linear infinite;
  stroke-dasharray: (pi() * @xs-spinner);
}
.spinner-small {
  animation: small-line 2s linear infinite;
  stroke-dasharray: (pi() * @small-spinner);
}

.spinner-medium {
  animation: medium-line 2s linear infinite;
  stroke-dasharray: (pi() * @medium-spinner);
}

.spinner-large {
  animation: large-line 2s linear infinite;
  stroke-dasharray: (pi() * @large-spinner);
}

@keyframes xs-line {
  0% {
    stroke-dashoffset: (0.66 * @xs-spinner); // increase
    transform: rotate(0);
  }
  50% {
    stroke-dashoffset: (pi() * @xs-spinner); // decrease
    transform: rotate(720deg);
  }
  100% {
    stroke-dashoffset: (0.66 * @xs-spinner); // increase
    transform: rotate(1080deg);
  }
}

@keyframes small-line {
  0% {
    stroke-dashoffset: (0.66 * @small-spinner); // increase
    transform: rotate(0);
  }
  50% {
    stroke-dashoffset: (pi() * @small-spinner); // decrease
    transform: rotate(720deg);
  }
  100% {
    stroke-dashoffset: (0.66 * @small-spinner); // increase
    transform: rotate(1080deg);
  }
}

@keyframes medium-line {
  0% {
    stroke-dashoffset: (0.66 * @medium-spinner);
    transform: rotate(0);
  }
  50% {
    stroke-dashoffset: (pi() * @medium-spinner);
    transform: rotate(720deg);
  }
  100% {
    stroke-dashoffset: (0.66 * @medium-spinner);
    transform: rotate(1080deg);
  }
}

@keyframes large-line {
  0% {
    stroke-dashoffset: (0.66 * @large-spinner);
    transform: rotate(0);
  }
  50% {
    stroke-dashoffset: (pi() * @large-spinner);
    transform: rotate(720deg);
  }
  100% {
    stroke-dashoffset: (0.66 * @large-spinner);
    transform: rotate(1080deg);
  }
}
@media screen and (prefers-reduced-motion) {
  .spinner {
    animation: none;
  }
}