/**
 * Header iOS swipe back
 */
.PanelHeader__in--swipe-back-failed .PanelHeader__bg,
.PanelHeader__in--swipe-back-failed .PanelHeader__content,
.PanelHeader__in--swipe-back-failed .PanelHeader__left-in,
.PanelHeader__in--swipe-back-failed .PanelHeader__addon,
.PanelHeader__in--swipe-back-success .PanelHeader__bg,
.PanelHeader__in--swipe-back-success .PanelHeader__content,
.PanelHeader__in--swipe-back-success .PanelHeader__left-in,
.PanelHeader__in--swipe-back-success .PanelHeader__addon {
  transition:
      opacity .3s var(--ios-easing),
      transform .3s var(--ios-easing);
  }

/*
  next failed
 */
.PanelHeader__in--swipe-back-next.PanelHeader__in--swipe-back-failed .PanelHeader__bg {}

.PanelHeader__in--swipe-back-next.PanelHeader__in--swipe-back-failed .PanelHeader__content,
.PanelHeader__in--swipe-back-next.PanelHeader__in--swipe-back-failed .PanelHeader__addon {
  opacity: 0;
  transform: translate3d(-30vw, 0, 0);
  }

.PanelHeader__in--swipe-back-next.PanelHeader__in--swipe-back-failed .PanelHeader__left-in,
.PanelHeader__in--swipe-back-next.PanelHeader__in--swipe-back-failed .PanelHeader__right {
  opacity: 0;
  }

/*
  next success
 */
.PanelHeader__in--swipe-back-next.PanelHeader__in--swipe-back-success .PanelHeader__content,
.PanelHeader__in--swipe-back-next.PanelHeader__in--swipe-back-success .PanelHeader__addon {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  }

.PanelHeader__in--swipe-back-next.PanelHeader__in--swipe-back-success .PanelHeader__left-in,
.PanelHeader__in--swipe-back-next.PanelHeader__in--swipe-back-success .PanelHeader__right {
  opacity: 1;
  }

/*
  prev failed
 */
.PanelHeader__in--swipe-back-prev.PanelHeader__in--swipe-back-failed .PanelHeader__content,
.PanelHeader__in--swipe-back-prev.PanelHeader__in--swipe-back-failed .PanelHeader__addon {
  transform: translate3d(0, 0, 0);
  opacity: 1;
  }

.PanelHeader__in--swipe-back-prev.PanelHeader__in--swipe-back-failed .PanelHeader__left-in,
.PanelHeader__in--swipe-back-prev.PanelHeader__in--swipe-back-failed .PanelHeader__right,
.PanelHeader__in--swipe-back-prev.PanelHeader__in--swipe-back-failed .PanelHeader__bg {
  opacity: 1;
  }

/*
  prev success
 */
.PanelHeader__in--swipe-back-prev.PanelHeader__in--swipe-back-success .PanelHeader__content,
.PanelHeader__in--swipe-back-prev.PanelHeader__in--swipe-back-success .PanelHeader__addon {
  transform: translate3d(30vw, 0, 0);
  opacity: 0;
  }

.PanelHeader__in--swipe-back-prev.PanelHeader__in--swipe-back-success .PanelHeader__left-in,
.PanelHeader__in--swipe-back-prev.PanelHeader__in--swipe-back-success .PanelHeader__right,
.PanelHeader__in--swipe-back-prev.PanelHeader__in--swipe-back-success .PanelHeader__bg {
  opacity: 0;
  }

/**
 * Header transition
 */
.PanelHeader--ios .PanelHeader__in--prev,
.PanelHeader--ios .PanelHeader__in--next {
  overflow: hidden;
  }

.PanelHeader--ios .PanelHeader__in--next {
  z-index: 2;
  }

.PanelHeader--ios .PanelHeader__in--prev {
  z-index: 1;
  }

.PanelHeader--ios .PanelHeader__in--prev .PanelHeader__left-in,
.PanelHeader--ios .PanelHeader__in--prev .PanelHeader__right,
.PanelHeader--ios .PanelHeader__in--prev .PanelHeader-bg::after {
  animation: animation-ios-header-fade-out .6s var(--ios-easing);
  }

.PanelHeader--ios .PanelHeader__in--next .PanelHeader__left-in,
.PanelHeader--ios .PanelHeader__in--next .PanelHeader__right,
.PanelHeader--ios .PanelHeader__in--next .PanelHeader__bg {
  animation: animation-ios-header-fade-in .6s var(--ios-easing);
  }

.PanelHeader--ios .PanelHeader__in--prev .PanelHeader__content,
.PanelHeader--ios .PanelHeader__in--prev .PanelHeader__addon {
  animation: animation-ios-header-prev-forward .6s var(--ios-easing);
  }

.PanelHeader--ios .PanelHeader__in--next .PanelHeader__content,
.PanelHeader--ios .PanelHeader__in--next .PanelHeader__addon {
  animation: animation-ios-header-next-back .6s var(--ios-easing);
  }

.PanelHeader--ios .PanelHeader__in--prev ~ .PanelHeader__in--next .PanelHeader__content,
.PanelHeader--ios .PanelHeader__in--prev ~ .PanelHeader__in--next .PanelHeader__addon {
  animation: animation-ios-header-next-forward .6s var(--ios-easing);
  }

.PanelHeader--ios .PanelHeader__in--next ~ .PanelHeader__in--prev .PanelHeader__content,
.PanelHeader--ios .PanelHeader__in--next ~ .PanelHeader__in--prev .PanelHeader__addon {
  animation: animation-ios-header-prev-back .6s var(--ios-easing);
  }

@keyframes animation-ios-header-next-back {
  from {
    opacity: 0;
    transform: translateX(-30vw);
    }

  to {
    opacity: 1;
    transform: translateX(0);
    }
  }

@keyframes animation-ios-header-next-forward {
  from {
    opacity: 0;
    transform: translateX(30vw);
    }

  to {
    opacity: 1;
    transform: translateX(0);
    }
  }

@keyframes animation-ios-header-prev-back {
  from {
    opacity: 1;
    transform: translateX(0);
    }

  to {
    opacity: 0;
    transform: translateX(30vw);
    }
  }

@keyframes animation-ios-header-prev-forward {
  from {
    opacity: 1;
    transform: translateX(0);
    }

  to {
    opacity: 0;
    transform: translateX(-30vw);
    }
  }

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

  to {
    opacity: 1;
    }
  }

@keyframes animation-ios-header-fade-out {
  from {
    opacity: 1;
    }

  to {
    opacity: 0;
    }
  }

.PanelHeader--android .PanelHeader__in--prev {
  animation: animation-android-header-prev .3s var(--android-easing);
  }

.PanelHeader--android .PanelHeader__in--next ~ .PanelHeader__in--prev {
  animation: animation-android-header-prev-back .3s var(--android-easing);
  }

.PanelHeader--android .PanelHeader__in--prev ~ .PanelHeader__in--next {
  animation: animation-android-header-next-forward .3s var(--android-easing);
  }

@keyframes animation-android-header-prev {
  from {
    opacity: 1;
    }

  to {
    opacity: 0;
    }
  }

@keyframes animation-android-header-prev-back {
  from {
    opacity: 1;
    transform: translateY(0);
    }

  to {
    opacity: 0;
    transform: translateY(80px);
    }
  }

@keyframes animation-android-header-next-forward {
  from {
    opacity: 0;
    transform: translateY(80px);
    }

  to {
    opacity: 1;
    transform: translateY(0);
    }
  }