@import url("../../_style/_mixins.less");
@import url("../../_style/_theme.less");

@import url('./toolbars-pages.less');

.page {
  box-sizing: border-box;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #efeff4;
  .translate3d(0,0,0);
}
.page-on-left {
  .translate3d(-20%);
  .swipeback-page-opacity {
      opacity: 1;
  }
  &:after {
      opacity: 1;
  }
}
.page-on-center {
  .swipeback-page-shadow {
      opacity: 1;
  }
  .swipeback-page-opacity {
      opacity: 0 !important;
  }
}
.page-on-right {
  .translate3d(100%);
  .swipeback-page-shadow {
      opacity: 0 !important;
  }
}
.page-content {
  .scrollable();
  box-sizing: border-box;
  height: 100%;
  position: relative;
  z-index: 1;
}

// Page Shadow
.page-fake-opacity() {
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(0,0,0,0.1);
  width: 100%;
  height: 100%;
  content: '';
  opacity: 0;
  z-index: 10000;
  will-change: opacity;
  contain: strict;
}
.page-fake-shadow() {
  position: absolute;
  right: 100%;
  top: 0;
  width: 16px;
  height: 100%;
  background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 10%, rgba(0,0,0,0.01) 50%, rgba(0,0,0,0.2) 100%);
  background: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 10%, rgba(0,0,0,0.01) 50%, rgba(0,0,0,0.2) 100%);
  z-index: -1;
  content: '';
  will-change: opacity;
  contain: strict;
  html.android & {
      display: none;
      .animation(none);
  }
}

//Class that will trigger transition during page custom transitions (like swipe-back)
.page-transitioning {
  &, .swipeback-page-shadow, .swipeback-page-opacity {
      .transition(@pageDuration);
  }
}
.page-from-right-to-center, .page-from-center-to-right {
  &:before {
      .page-fake-shadow();
  }
}
// From/to Right To/from Center animations
.page-from-right-to-center {
  z-index: 5001;
  &:before {
      .animation(pageFromRightToCenterShadow @pageDuration forwards);
  }
  .animation(pageFromRightToCenter @pageDuration forwards);
}
.page-from-center-to-right {
  z-index: 5001;
  &:before {
      .animation(pageFromCenterToRightShadow @pageDuration forwards);
  }
  .animation(pageFromCenterToRight @pageDuration forwards);
}

@keyframes pageFromRightToCenter {
  from {
      transform: translate3d(100%,0,0);
  }
  to {
      transform: translate3d(0,0,0);
  }
}

@keyframes pageFromRightToCenterShadow {
  from {
      opacity: 0;
  }
  to {
      opacity: 1;
  }
}

@keyframes pageFromCenterToRight {
  from {
      transform: translate3d(0,0,0);
  }
  to {
      transform: translate3d(100%,0,0);
  }
}

@keyframes pageFromCenterToRightShadow {
  from {
      opacity: 1;
  }
  to {
      opacity: 0;
  }
}


// From/to Center To/from Left animations
.page-from-center-to-left {
  .animation(pageFromCenterToLeft @pageDuration forwards);
  &:after {
      .page-fake-opacity();
      .animation(pageFromCenterToLeftOpacity @pageDuration forwards);
  }
}
.page-from-left-to-center {
  .animation(pageFromLeftToCenter @pageDuration forwards);
  &:after {
      .page-fake-opacity();
      .animation(pageFromLeftToCenterOpacity @pageDuration forwards);
  }
}


@keyframes pageFromCenterToLeft {
  from {
      transform: translate3d(0,0,0);
  }
  to {
      transform: translate3d(-20%,0,0);
  }
}

@keyframes pageFromLeftToCenter {
  from {
      transform: translate3d(-20%,0,0);
  }
  to {
      transform: translate3d(0,0,0);
  }
}

@keyframes pageFromCenterToLeftOpacity {
  from {
      opacity: 0;
  }
  to {
      opacity: 1;
  }
}

@keyframes pageFromLeftToCenterOpacity {
  from {
      opacity: 1;
  }
  to {
      opacity: 0;
  }
}