/* ==================
         模态窗口
 ==================== */
@import "../vars";

.cu-modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1110;
  opacity: 0;
  outline: 0;
  text-align: center;
  -ms-transform: scale(1.185);
  transform: scale(1.185);
  backface-visibility: hidden;
  perspective: 2000px;
  background: rgba(0, 0, 0, 0.6);
  transition: all 0.3s ease-in-out 0s;
  pointer-events: none;
  &::before {
    content: "\200B";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
  }
  &.show {
    opacity: 1;
    transition-duration: 0.3s;
    -ms-transform: scale(1);
    transform: scale(1);
    overflow-x: hidden;
    overflow-y: auto;
    pointer-events: auto;
  }
  &.bottom-modal {
    margin-bottom: -1000px;
    &::before {
      vertical-align: bottom;
    }
    .cu-dialog {
      width: 100%;
      border-radius: 0;
    }
    &.show {
      margin-bottom: 0;
    }
  }
  &.drawer-modal {
    transform: scale(1);
    display: flex;
    .cu-dialog {
      height: 100%;
      min-width: 200px;
      border-radius: 0;
      margin: initial;
      transition-duration: 0.3s;
    }
    &.justify-start {
      .cu-dialog {
        transform: translateX(-100%);
      }
    }
    &.justify-end {
      .cu-dialog {
        transform: translateX(100%);
      }
    }
    &.show {
      .cu-dialog {
        transform: translateX(0%);
      }
    }
  }
}

.cu-dialog {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin-left: auto;
  margin-right: auto;
  width: 680px;
  max-width: 100%;
  background-color: #f8f8f8;
  border-radius: 10px;
  overflow: hidden;
}