@import "variables";
@import "mixins";

@mixin view-right() {
  @include translate3d(100%, 0, 0);
}

@mixin view-left() {
  @include translate3d(-33%, 0, 0);
}

@mixin view-center() {
  @include translate3d(0, 0, 0);
}

.page-enter-active,
.page-leave-active,
.grade-a .page-enter-active,
.grade-a .page-leave-active
{
  @include transition-duration($ios-transition-duration);
  @include transition-timing-function($ios-transition-timing-function);
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
}

.grade-b .page-enter-active,
.grade-b .page-leave-active
{
  @include transition-duration($android-transition-duration);
  @include transition-timing-function($android-transition-timing-function);
}

[transition-direction="forward"] {
  .page-enter {
    @include view-right();
    opacity: 1;
    z-index: 2;
  }
  .page-enter-active {
    box-shadow: 0 0 10px rgba(0,0,0,.15);
  }
  .page-enter-to {
    @include view-center();
    opacity: 1;
    z-index: 2;
  }
  .page-leave {
    @include view-center();
    opacity: 0.8;
    z-index: 1;
  }
  .page-leave-to {
    @include view-left();
    opacity: 0;
    z-index: 1;
  }
}

[transition-direction="back"] {
  .page-enter {
    @include view-left();
    opacity: 0.8;
    z-index: 1;
  }
  .page-enter-to {
    @include view-center();
    opacity: 1;
    z-index: 1;
  }
  .page-leave {
    @include view-center();
    opacity: 1;
    z-index: 2;
  }
  .page-leave-active {
    box-shadow: 0 0 10px rgba(0,0,0,.15);
  }
  .page-leave-to {
    @include view-right();
    opacity: 1;
    z-index: 2;
  }
}