@charset "utf-8";

.x-popup {
  align-items: flex-end !important;
  &--top {
    align-items: flex-start !important;
  }
  &__inner {
    overflow: auto;
    padding: 40px;
    flex: 1;
  }
  &--no-padding {
    padding: 0;
  }
  &__scroller {
    flex: 1;
    display: flex;
  }
  &__inscroller {
    flex: 1;
    margin: 0 -40px 0 0;
    padding: 0 40px 0 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
  &--no-scroll {
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .x-modal__inner {
    height: 50%;
    display: flex;
    flex-direction: column;
    background: #fff;
  }
  &.x-modal--enter {
    .x-modal__inner {
      animation: __x_popup_slideup_enter cubic-bezier(0.5, 0, 0.3, 1) 0.3s;
    }
    &.x-popup--top {
      .x-modal__inner {
        animation: __x_popup_slidedown_enter cubic-bezier(0.5, 0, 0.3, 1) 0.3s;
      }
    }
  }
  &.x-modal--leave {
    .x-modal__inner {
      animation: __x_popup_slideup_leave cubic-bezier(0.5, 0, 0.3, 1) 0.3s;
    }
    &.x-popup--top {
      .x-modal__inner {
        animation: __x_popup_slidedown_leave cubic-bezier(0.5, 0, 0.3, 1) 0.3s;
      }
    }
  }
}

@keyframes __x_popup_slideup_enter {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes __x_popup_slideup_leave {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(100%);
  }
}

@keyframes __x_popup_slidedown_enter {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes __x_popup_slidedown_leave {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100%);
  }
}