@import "compass/css3";

$l: 2.5em;

@function fpos($n, $pos) { @return if($n == $pos, 1, 0); }

html, body { height: 100%; }

body {
  overflow: hidden;
  margin: 0;
  perspective: $l*33;
  perspective-origin: 50% calc(50% - #{24*$l});
  background: dimgrey;
}

.assembly {
  &, *, :before {
    box-sizing: border-box;
    position: absolute;
    top: 50%; left: 50%;
    transform-style: preserve-3d;
  }
  
  transform: rotateY(-45deg);
  animation: rot 9s ease-in-out infinite;
}

.d-segment {
  @for $i from 0 to 3 {
    &:nth-child(#{$i + 1}) {
      transform: rotate3d(-1*fpos($i, 0), 0, fpos($i, 2), 90deg) 
                 translate3d(-2*$l, $l/2, 2*$l);
    }
  }
  
  &:last-child .face {
    &:nth-child(odd):nth-child(-n + 4) {
      margin-top: -$l;
      height: 3*$l;
      &:before {
        margin: 2.5*-$l (-$l/2);
        width: $l; height: $l;
        content: '';
      }
    }
    &:nth-child(1):before {
      border-left: solid 1px;
      background: linear-gradient(45deg, 
        gainsboro calc(50% - 1px), black calc(50% - 1px), black 50%, transparent 50%);
    }
    &:nth-child(3):before {
      border-right: solid 1px;
      background: linear-gradient(-45deg, 
        gainsboro calc(50% - 1px), black calc(50% - 1px), black 50%, transparent 50%);
    }
    &:nth-child(5) {
      margin-left: -$l/sqrt(2);
      width: $l*sqrt(2);
      transform: rotateX(90deg) translateZ(1.5*$l) rotateY(45deg);
    }
  }
}

.face {
  margin: -2*$l (-$l/2);
  border: solid 1px;
  width: $l; height: 4*$l;
  backface-visibility: hidden;
  background: linear-gradient(black 1px, gainsboro 1px) 0 0 / #{$l} $l border-box;
  
  @for $i from 0 to 6 {
    &:nth-child(#{$i + 1}) {
      transform: if($i < 4, rotateY($i*90deg), rotateX(pow(-1, $i)*90deg)) 
                 translateZ(if($i < 4, $l/2, 2*$l));
    }
  }
  
  &:nth-last-child(-n + 2) {
    margin-top: -$l/2;
    height: $l;
  }
}

@keyframes rot { to { transform: rotateY(315deg); } }