.make-position(@panelSize, @numberOfPanels) {
  @tz: round(( @panelSize / 2 ) /tan(pi()/(@numberOfPanels))) * -1;

  // Common styles for all sizes of grid columns, widths 1-12
  .col(@index) when (@index =< (@numberOfPanels + 1)) {
    // general; "=<" isn't a typo
    &[views="@{numberOfPanels}"] {
      &.current-view-@{index}, view:nth-child(@{index}) {
        transform: rotateY((round(360deg/@numberOfPanels) * (@index - 1)) * -1) translateZ(@tz);
      }
    }

    .col((@index + 1));
  }
  .col(1); // kickstart it
}

.make-positions(@panelSize, @maxNumberOfPanels) {
  .c(@i) when (@i =< @maxNumberOfPanels) {
    .make-position(@panelSize, @i);
    .c((@i + 1));
  }
  .c(2); // kickstart it
}

.make-steps(@panelSize, @numberOfPanels) {
  @tz: round(( @panelSize / 2 ) /tan(pi()/(@numberOfPanels))) * -1;

  // Common styles for all sizes of grid columns, widths 1-12
  .col(@index) when (@index =< @numberOfPanels) {
    // general; "=<" isn't a typo
    [views="@{numberOfPanels}"] &:nth-child(@{index}) {
      transform: rotateY((round(360deg/@numberOfPanels) * (@index - 1)) * -1) translateZ(@tz);
    }

    .col((@index + 1));
  }
  .col(1); // kickstart it

}

.animation-default {
  transform-style: preserve-3d;
  transform: rotateY(0deg) translateZ(0vw);
  transition: transform 1s ease 0s;

  view {
    backface-visibility: hidden;

  }

  .make-positions(@zazu-view-width, @zazu-max-number-of-panels);
}