@import 'functions';

.cube {
  position:relative;
  display:block;
  transform-style:preserve-3d;
  transform:rotateX(-33.5deg) rotateY(45deg);

  &__inner,
  &__outer {
    display:inline-block;
    transform-style:preserve-3d;
    transition:transform 1000ms;
  }

  &__inner {
    position:absolute;
    top:-2px;
    left:0;
  }

  &__face {
    position:absolute;
    width:100%;
    height:100%;
    border: 1px solid getColor(white);
  }

  .cube__outer .cube__face {
    background:transparentize(getColor(malibu), 0.5);
    transition: border-width 0.2s;
    transition-delay: 0.2s;
  }

  .cube__inner .cube__face {
    background:getColor(denim);
    border: 2px solid getColor(white);
  }
}
