/*
 *  Usage:
 *
      <div class="xt_woofc-spinner-wandering-cubes">
        <div class="xt_woofc-spinner-cube xt_woofc-spinner-cube1"></div>
        <div class="xt_woofc-spinner-cube xt_woofc-spinner-cube2"></div>
      </div>
 *
 */
@import "../variables";

.xt_woofc-spinner-wandering-cubes {
  $animationDuration: 1.8s;

  margin: $spinkit-spinner-margin;
  width: $spinkit-spinner-size;
  height: $spinkit-spinner-size;
  position: relative;

  .xt_woofc-spinner-cube {
    background-color: $spinkit-spinner-color;
    width: 10px;
    height: 10px;
    position: absolute;
    top: 0;
    left: 0;
    animation: xt_woofc-spinner-wanderingCube $animationDuration ease-in-out #{$animationDuration} infinite both;
  }

  .xt_woofc-spinner-cube2 {
    animation-delay: $animationDuration / 2;
  }
}

@keyframes xt_woofc-spinner-wanderingCube {
  $cubeDistance: 30px;
  0% {
    transform: rotate(0deg);
  } 25% {
    transform: translateX($cubeDistance) rotate(-90deg) scale(0.5);
  } 50% {
    /* Hack to make FF rotate in the right direction */
    transform: translateX($cubeDistance) translateY($cubeDistance) rotate(-179deg);
  } 50.1% {
    transform: translateX($cubeDistance) translateY($cubeDistance) rotate(-180deg);
  } 75% {
    transform: translateX(0) translateY($cubeDistance) rotate(-270deg) scale(0.5);
  } 100% {
    transform: rotate(-360deg);
  }
}