.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
    &.current-view-@{index} {
      transform: translatex(-1 * @panelSize / @numberOfPanels * (@index - 1));

      view, [view], .view {
        &:nth-child(@{index}) {
          transform: scale(1);
        }
      }
    }

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

.make-positions(@panelSize, @maxNumberOfPanels) {
  .c(@i) when (@i =< @maxNumberOfPanels) {
    &[views="@{i}"], &.views-@{i} {
      & {
        width: @i * @panelSize;
        .make-position(@panelSize, @i);

        view, [view], .view {
          width: @panelSize / @i;
        }
      }
    }
    .c((@i + 1));
  }
  .c(1); // 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}"], &.views-@{numberOfPanels} {
      &:nth-child(@{index}) {
        transform: rotateY((round(360deg/@numberOfPanels) * (@index - 1) * -1)) translateZ(@tz);
      }
    }

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

}

.animation-slides {
  transform-style: preserve-3d;
  transition: transform .3s ease 0s;
  will-change: transform;

  view, [view], .view {
    backface-visibility: hidden;
    position: relative;
    transition: transform 1s ease 0s;
    transform: scale(1);
    display: inline-block;

  }

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