@keyframes ball-scale-multiple {
  0% {
    transform: scale(0.0);
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  100% {
    transform: scale(1.0);
    opacity: 0;
  }
}

@function spinner-delay($interval, $count, $index) {
  @return ($index * $interval) - ($interval * $count);
}

@mixin ball-scale-multiple ($n: 3, $start: 2) {
  @for $i from $start through $n {
    > div:nth-child(#{$i}) {
      animation-delay: spinner-delay(0.2s, $n, $i - 1);
    }
  }
}

.spinner {
  @include ball-scale-multiple();

  display: inline-block;
  position: relative;
  transform: translateY(0);
  width: $spinner-size;
  height: $spinner-size;

  > div {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    margin: 0;
    width: $spinner-size;
    height: $spinner-size;
    border-radius: 100%;
    animation: ball-scale-multiple 1s 0s linear infinite;
    animation-fill-mode: both;
  }
}

@each $color, $value in $theme-colors {
  .spinner-#{$color} {
    > div {
      background-color: $value;
    }
  }
}

.spinner-sm,
.spinner-sm > div {
  width: $spinner-size-sm;
  height: $spinner-size-sm;
}

.spinner-lg,
.spinner-lg > div {
  width: $spinner-size-lg;
  height: $spinner-size-lg;
}