.View--ios {
}

.View--ios .Panel__in {
  padding-bottom: var(--safe-area-inset-bottom);
}

.View--ios .Panel__in {
  padding: 0 var(--safe-area-inset-right) var(--safe-area-inset-bottom) var(--safe-area-inset-left);
}

/**
 * Panel swipe back
 */

.View--ios .View__panel--swipe-back-prev {
  box-shadow: -2px 0 12px rgba(0, 0, 0, .3);
}

.View--ios .View__panel--swipe-back-prev.View__panel--swipe-back-success {
  transition: transform .3s var(--ios-easing);
  transform: translate3d(100%, 0, 0);
}

.View--ios .View__panel--swipe-back-next.View__panel--swipe-back-success {
  transition: transform .3s var(--ios-easing);
  transform: translate3d(0, 0, 0);
}

.View--ios .View__panel--swipe-back-prev.View__panel--swipe-back-failed {
  transition: transform .3s var(--ios-easing);
  transform: translate3d(0, 0, 0);
}

.View--ios .View__panel--swipe-back-next.View__panel--swipe-back-failed {
  transition: transform .3s var(--ios-easing);
  transform: translate3d(-50%, 0, 0);
}

/**
 * Panel transition
 */
.View--ios .View__panel--prev {
  animation: animation-ios-prev-forward .6s var(--ios-easing);
}

.View--ios .View__panel--next {
  animation: animation-ios-next-back .6s var(--ios-easing);
}

.View--ios .View__panel--prev ~ .View__panel--next {
  animation: animation-ios-next-forward .6s var(--ios-easing);
}

.View--ios .View__panel--next ~ .View__panel--prev {
  animation: animation-ios-prev-back .6s var(--ios-easing);
}

.View--ios .View__panel--prev .Panel__fade,
.View--ios .View__panel--next .Panel__fade {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 10;
  background: #000;
  pointer-events: none;
}

.View--ios .View__panel--prev .Panel__fade {
  animation: animation-ios-fade-in .6s var(--ios-easing);
}

.View--ios .View__panel--next .Panel__fade {
  animation: animation-ios-fade-out .6s var(--ios-easing);
}

.View--ios .View__panel--prev ~ .View__panel--next .Panel__fade,
.View--ios .View__panel--next ~ .View__panel--prev .Panel__fade {
  display: none;
}

.View--ios.View--no-motion .View__panel,
.View--ios.View--no-motion .View__panel .Panel__in {
  animation: none;
}

/**
 * Active panel
 */
.View--ios .View__panel--active .Panel__fade {
  display: none;
}

@keyframes animation-ios-next-forward {
  from {
    transform: translate3d(100%, 0, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes animation-ios-next-back {
  from {
    transform: translate3d(-50%, 0, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes animation-ios-prev-forward {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-50%, 0, 0);
  }
}

@keyframes animation-ios-prev-back {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(100%, 0, 0);
  }
}

@keyframes animation-ios-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: .3;
  }
}

@keyframes animation-ios-fade-out {
  from {
    opacity: .3;
  }

  to {
    opacity: 0;
  }
}