/*
 *  Usage:
 *
      <div className={`${styles.cubeGrid}` }>
          < div className={`${styles.cube} ${styles.cube1}`}></div>
          <div className={`${styles.cube} ${styles.cube2}`}></div>
          <div className={`${styles.cube} ${styles.cube3}`}></div>
          <div className={`${styles.cube} ${styles.cube4}`}></div>
          <div className={`${styles.cube} ${styles.cube5}`}></div>
          <div className={`${styles.cube} ${styles.cube6}`}></div>
          <div className={`${styles.cube} ${styles.cube7}`}></div>
          <div className={`${styles.cube} ${styles.cube8}`}></div>
          <div className={`${styles.cube} ${styles.cube9}`}></div>
      </div>
 *
 */
@import "../variables";

.cubeGrid {
  $delayRange: 0.4s;

  width: $width;
  height: $width;
  margin: $spinner-margin;
  transform: rotate(45deg);

  .cube {
    width: 33.33%;
    height: 33.33%;
    background-color: $spinner-color;
    float: left;
    animation: cubeGridScaleDelay 1.3s infinite ease-in-out;
  }

  /*
   * Spinner positions
   * 1 2 3
   * 4 5 6
   * 7 8 9
   */

  .cube7 { animation-delay: $delayRange * 0.00 }
  .cube4 { animation-delay: $delayRange * 0.25 }
  .cube8 { animation-delay: $delayRange * 0.25 }
  .cube1 { animation-delay: $delayRange * 0.50 }
  .cube5 { animation-delay: $delayRange * 0.50 }
  .cube9 { animation-delay: $delayRange * 0.50 }
  .cube2 { animation-delay: $delayRange * 0.75 }
  .cube6 { animation-delay: $delayRange * 0.75 }
  .cube3 { animation-delay: $delayRange * 1.00 }
}

@keyframes cubeGridScaleDelay {
  0%, 70%, 100% { transform:scale3D(1.0, 1.0, 1.0) }
  35%           { transform:scale3D(0.0, 0.0, 1.0) }
}