/* Animatable Cube */
/* -------------------------------------------------- */

:host {
  /**
   * @prop --animatable-cube-size: Size of the cube
   * @prop --animatable-cube-width: Width of the cube
   * @prop --animatable-cube-height: Height of the cube
   * @prop --animatable-cube-perspective: Perspective of the cube
   * @prop --animatable-cube-perspective-origin: Indicates the position of the abscissa and the ordinate of the vanishing point.
   * @prop --animatable-cube-display: Display of the cube
   * @prop --animatable-cube-transition-property: Specifies the name of the CSS property the cube's transition effect is for
   * @prop --animatable-cube-transition-duration: Specifies the duration of the transition to resize the cube
   * @prop --animatable-cube-transition-delay: Defines when the transition of the cube will start
   * @prop --animatable-cube-transition-timing-function: Describes how the intermediate values used during the transition of the cube will be calculated
   * @prop --animatable-cube-align-items: Align items of the cube
   * @prop --animatable-cube-justify-content: Justify content of the cube
   * @prop --animatable-cube-margin: Margin of the cube
   * @prop --animatable-cube-padding: Padding of the cube
   * @prop --animatable-cube-transform: Transform of the cube
   * @prop --animatable-cube-transform-origin: Transform origin of the cube
   * @prop --animatable-cube-animation: Animation of the cube
   *
   * @prop --animatable-cube-face-border: Cube faces border
   * @prop --animatable-cube-face-background: Cube faces background
   * @prop --animatable-cube-face-background-size: Cube faces background size
   * @prop --animatable-cube-face-animation: Cube faces background animation
   * @prop --animatable-cube-face-animation-duration: Defines the length of time that background animation takes to complete one cycle
   * @prop --animatable-cube-face-animation-timing-function: Describes how the background animation will progress over one cycle of its duration
   * @prop --animatable-cube-face-animation-delay: Defines when the background animation will start
   * @prop --animatable-cube-face-animation-iteration-count: Defines the number of times the background animation cycle is played
   * @prop --animatable-cube-face-animation-direction: Defines the direction of the background animation
   * @prop --animatable-cube-face-transform-origin: Establishes the origin of transformation for the cube faces
   *
   * @prop --animatable-cube-front-face-background: Background of the front face
   * @prop --animatable-cube-front-face-animation: Animation of the front face
   * @prop --animatable-cube-back-face-background: Background of the back face
   * @prop --animatable-cube-back-face-animation: Animation of the back face
   * @prop --animatable-cube-right-face-background: Background of the right face
   * @prop --animatable-cube-right-face-animation: Animation of the right face
   * @prop --animatable-cube-left-face-background: Background of the left face
   * @prop --animatable-cube-left-face-animation: Animation of the left face
   * @prop --animatable-cube-top-face-background: Background of the top face
   * @prop --animatable-cube-top-face-animation: Animation of the top face
   * @prop --animatable-cube-bottom-face-background: Background of the bottom face
   * @prop --animatable-cube-bottom-face-animation: Animation of the bottom face
   */

  --size: var(--animatable-cube-size, var(--animatable-cube-width, var(--animatable-cube-height, 100px)));
  --perspective: var(--animatable-cube-perspective, 1000px);
  --perspective-origin: var(--animatable-cube-perspective-origin, 50% 50%);

  --display: var(--animatable-cube-display, flex);
  --transition-property: var(--animatable-cube-transition-property, (width, height));
  --transition-duration: var(--animatable-cube-transition-duration, 0);
  --transition-delay: var(--animatable-cube-transition-delay, 0);
  --transition-timing-function: var(--animatable-cube-transition-timing-function, initial);
  --align-items: var(--animatable-cube-align-items, center);
  --justify-content: var(--animatable-cube-justify-content, center);
  --margin: var(--animatable-cube-margin, 0);
  --padding: var(--animatable-cube-padding, 0);

  --face-border: var(--animatable-cube-face-border, none);
  --face-background: var(--animatable-cube-face-background, white);
  --face-background-size: var(--animatable-cube-face-background-size, 100% 100%);
  --face-animation: var(
    --animatable-cube-face-animation,
    backgroundAnimation
    var(--animatable-cube-face-animation-duration, 0s)
    var(--animatable-cube-face-animation-timing-function, initial)
    var(--animatable-cube-face-animation-delay, 0s)
    var(--animatable-cube-face-animation-iteration-count, infinite)
    var(--animatable-cube-face-animation-direction, alternate)
  );

  --face-size: calc(var(--size)/2);
  --face-transform-origin: var(--animatable-cube-face-transform-origin, center center);

  perspective: var(--perspective);
  perspective-origin: var(--perspective-origin);
  padding: var(--padding);
  margin: var(--margin);
  display: var(--display);
  align-items: var(--align-items);
  justify-content: var(--justify-content);
  width: var(--size);
  height: var(--size);
  transition-property: var(--transition-property);
  transition-duration: var(--transition-duration);
  transition-delay: var(--transition-delay);
  transition-timing-function: var(--transition-timing-function);
}

:host > div {
  display: block;
  height: 100%;
  width: 100%;
  max-width: 100%;
  position: relative;
  background: transparent;
  transform-style: preserve-3d;
  transform: var(--animatable-cube-transform, translateZ(-var(--face-size)));
  transform-origin: var(--animatable-cube-transform-origin, initial);
  transition: transform var(--transition-duration);
}
.face {
  background: var(--animatable-cube-face-background, var(--face-background));
  position: absolute;
  height: 100%;
  width: 100%;
  border: var(--face-border);
  transition: transform var(--transition-duration);
  transform-origin: var(--face-transform-origin);
}
.front {
  transform:
    rotateY(0deg)
    translateZ(var(--face-size));
  will-change: transform;
  background: var(--animatable-cube-front-face-background, var(--face-background));
  background-size: var(--animatable-cube-front-face-background-size, var(--face-background-size));
  animation: var(--animatable-cube-front-face-animation, var(--face-animation));
}
.back {
  transform:
    rotateY(180deg)
    translateZ(var(--face-size));
  will-change: transform;
  background: var(--animatable-cube-back-face-background, var(--face-background));
  background-size: var(--animatable-cube-back-face-background-size, var(--face-background-size));
  animation: var(--animatable-cube-back-face-animation, var(--face-animation));
}
.right {
  transform:
    rotateY(90deg)
    translateZ(var(--face-size));
  will-change: transform;
  background: var(--animatable-cube-right-face-background, var(--face-background));
  background-size: var(--animatable-cube-right-face-background-size, var(--face-background-size));
  animation: var(--animatable-cube-right-face-animation, var(--face-animation));
}
.left {
  transform:
    rotateY(-90deg)
    translateZ(var(--face-size));
  will-change: transform;
  background: var(--animatable-cube-left-face-background, var(--face-background));
  background-size: var(--animatable-cube-left-face-background-size, var(--face-background-size));
  animation: var(--animatable-cube-left-face-animation, var(--face-animation));
}
.top {
  transform:
    rotateX(90deg)
    translateZ(var(--face-size));
  will-change: transform;
  background: var(--animatable-cube-top-face-background, var(--face-background));
  background-size: var(--animatable-cube-top-face-background-size, var(--face-background-size));
  animation: var(--animatable-cube-top-face-animation, var(--face-animation));
}
.bottom {
  transform:
    rotateX(-90deg)
    translateZ(var(--face-size));
  will-change: transform;
  background: var(--animatable-cube-bottom-face-background, var(--face-background));
  background-size: var(--animatable-cube-bottom-face-background-size, var(--face-background-size));
  animation: var(--animatable-cube-bottom-face-animation, var(--face-animation));
}

/* Animation Keyframes */

@keyframes backgroundAnimation {
  0%{
    background-position:0% 50%
  }

  50%{
    background-position:100% 50%
  }

  100%{
    background-position:0% 50%
  }
}