.root.view-flip {
  max-height: 100vh;
}

@mixin pinned-absolute {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

.view-flip {
  .zoom-holder {
    @include pinned-absolute();
    display: block;
  }

  .zoom-scaler {
    @include pinned-absolute();
    transform-origin: center;

    width: 0;
    height: 0;
  }

  .zoom-content {
    min-width: 0; //calc(1.1 * var(--bindery-spread-width));
  }
}

.flap-holder {
  perspective: 5000px;
  transform-style: preserve-3d;
  @include pinned-absolute();
}

.flipbook-sizer {
  // Larger than a spread to accomadate the 3d effect
  --bindery-flipbook-width: calc(var(--bindery-spread-width) * 1.15);
  --bindery-flipbook-height: calc(var(--bindery-page-height) * 1.05);

  position: absolute;

  width: var(--bindery-flipbook-width);
  height: var(--bindery-flipbook-height);

  top: calc(var(--bindery-flipbook-height) * -0.5);
  left: calc(var(--bindery-flipbook-width) * -0.5);
}

.page3d {
  margin: auto;
  width: var(--bindery-page-width);
  height: var(--bindery-page-height);
  transform: rotateY(0);
  transform-style: preserve-3d;
  transform-origin: left;
  transition: transform 0.5s, box-shadow 0.1s;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;

  &:hover {
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.2);
  }

  &.flipped {
    transform: rotateY(-180deg);
  }

  .page {
    position: absolute;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
  }

  .page3d-front {
    transform: rotateY(0);
  }

  .page3d-back {
    transform: rotateY(-180deg);
  }
}
