@keyframes loadingDot {
  0%,
  80%,
  100% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
}

@keyframes loadingDotBounce {
  0%,
  80%,
  100% {
    transform: translateY(0);
    opacity: 1;
  }
  40% {
    transform: translateY(-4px);
    opacity: 0.4;
  }
  60% {
    opacity: 0.6;
  }
}

.ads-LoadingDots {
  @apply inline-flex
    self-center
    text-center
    align-middle
    justify-between;

  transition: color 150ms;
}

.ads-LoadingDots-dot {
  @apply align-top
    inline-block
    rounded-full;

  animation: loadingDot 1.2s infinite ease-in-out;
}

.ads-LoadingDots-dot:nth-child(2) {
  animation-delay: 160ms;
}

.ads-LoadingDots-dot:nth-child(3) {
  animation-delay: 320ms;
}

.ads-LoadingDots--bounce .ads-LoadingDots-dot {
  animation-name: loadingDotBounce;
}

.ads-LoadingDots--bounce .ads-LoadingDots-dot:nth-child(1) {
  animation-delay: -320ms;
}

.ads-LoadingDots--bounce .ads-LoadingDots-dot:nth-child(2) {
  animation-delay: -160ms;
}