/*
 *  Usage:
 *
      <div class="xt_woofc-spinner-three-bounce">
        <div class="xt_woofc-spinner-child xt_woofc-spinner-bounce1"></div>
        <div class="xt_woofc-spinner-child xt_woofc-spinner-bounce2"></div>
        <div class="xt_woofc-spinner-child xt_woofc-spinner-bounce3"></div>
      </div>
 *
 */

.xt_woofc-spinner-three-bounce {
  $animationDuration: 1.2s;
  $delayRange: 0.32s;
  margin: var(--xt-woofc-spinner-margin);
  width: calc(var(--xt-woofc-spinner-size) * 2);
  text-align: center;

  .xt_woofc-spinner-child {
    width: calc(var(--xt-woofc-spinner-size) / 2);
    height: calc(var(--xt-woofc-spinner-size) / 2);
    background-color: var(--xt-woofc-spinner-color);

    border-radius: 100%;
    display: inline-block;
    animation: xt_woofc-spinner-three-bounce $animationDuration ease-in-out 0s infinite both;
  }

  .xt_woofc-spinner-bounce1 { animation-delay: $delayRange; }
  .xt_woofc-spinner-bounce2 { animation-delay: $delayRange / 2; }
}

@keyframes xt_woofc-spinner-three-bounce {
  0%, 80%, 100% {
    transform: scale(0);
  } 40% {
    transform: scale(1.0);
  }
}