@keyframes spinner-dot-one {
  0% {
    transform: scale(0);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(0);
  }
}

@keyframes spinner-dot-two {
  0% {
    transform: scale(0);
  }
  20% {
    transform: scale(0);
  }
  45% {
    transform: scale(1);
  }
  70% {
    transform: scale(0);
  }
}

@keyframes spinner-dot-three {
  0% {
    transform: scale(0);
  }
  40% {
    transform: scale(0);
  }
  65% {
    transform: scale(1);
  }
  90% {
    transform: scale(0);
  }
}

.spinner-dots {
  display: flex;
  height: 12px;
  width: 46px;
}

.spinner-dots--centered {
  left: 50%;
  margin-left: -23px;
  margin-top: -6px;
  pointer-events: none;
  position: absolute;
  top: 50%;
}

.spinner-dots__dot {
  height: 12px;
  margin-left: 5px;
  width: 12px;

  &::after {
    animation-duration: 1.25s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-delay: 0.01s; // See: https://stackoverflow.com/a/40028240
    background-color: currentcolor;
    border-radius: 50%;
    content: '';
    display: block;
    height: 100%;
    transform: scale(0);
    width: 100%;
  }

  &:first-child {
    margin-left: 0;
  }

  &:nth-child(1)::after {
    animation-name: spinner-dot-one;
  }

  &:nth-child(2)::after {
    animation-name: spinner-dot-two;
  }

  &:nth-child(3)::after {
    animation-name: spinner-dot-three;
  }
}
