@charset "utf-8";

.x-dialog {
  z-index: 99999;
  &__inner {
    padding: 40px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  &__scroller {
    flex: 1;
    display: flex;
  }
  &__inscroller {
    flex: 1;
    overflow: auto;
    margin: 0 -30px 0 0;
    padding: 0 30px 0 0;
    -webkit-overflow-scrolling: touch;
  }
  .x-modal__inner {
    display: flex;
    flex-direction: column;
    background: #fff;
    transform-origin: 50%;
    border-radius: 6px;
    width: 85%;
  }
  &.x-modal--enter {
    .x-modal__bg {
      opacity: 1;
    }
    .x-modal__inner {
      animation: __x_dialog_enter 0.2s ease-out;
    }
  }
  &.x-modal--leave {
    .x-modal__bg {
      opacity: 0;
    }
    .x-modal__inner {
      animation: __x_dialog_leave 0.1s ease-out;
    }
  }
}

@keyframes __x_dialog_enter {
  0% { transform: scale(1.4,1.4); opacity: 0;}
  75% { transform: scale(0.95,0.95); opacity: 1;}
  100% { transform: scale(1,1); opacity: 1;}
}
@keyframes __x_dialog_leave {
  0% { transform: scale(1,1); opacity: 1;}
  100% { transform: scale(0.95,0.95); opacity: 0;}
}