@import "../utils/vue-popup/popup.css";

.el-dialog{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background-color: $color-white;
  border-radius: $border-radius-small;
  box-shadow: $dialog-box-shadow;
  box-sizing: border-box;
}

.el-dialog-tiny{
  width: $dialog-tiny-width;
}

.el-dialog-small{
  width: $dialog-small-width;
}

.el-dialog-normal{
  width: $dialog-normal-width;
}

.el-dialog-large{
  width: $dialog-large-width;
}

.el-dialog-full{
  width: 100%;
  top:0;
  height: 100%;
  overflow: auto;
}

.el-dialog-wrapper{
  top:0;
  right:0;
  bottom:0;
  left:0;
  position: fixed;
  overflow: auto;
  margin: 0;
}

.el-dialog-header{
  padding: 20px 20px 0;
}

.el-dialog-close{
  cursor: pointer;
  color: $dialog-close-color;

  &:hover{
    color: $dialog-close-hover-color;
  }
}

.el-dialog-title{
  line-height: 1;
  font-size: $dialog-title-font-size;
  font-weight: 700;
  color: #1f2d3d;
}

.el-dialog-body{
  padding: 30px 20px;
  color: #475669;
  font-size: $dialog-font-size;
}

.el-dialog-headerbtn{
  float: right;
}

.el-dialog-footer{
  padding: 10px 20px 15px;
  text-align: right;
  box-sizing: border-box;
  border-top: 1px solid #eee
}

.dialog-fade-enter-active{
  -webkit-animation: dialog-fade-in .3s;  
  animation: dialog-fade-in .3s;
}

.dialog-fade-leave-active{
  -webkit-animation: dialog-fade-out .3s;  
  animation: dialog-fade-out .3s;
}

@keyframes dialog-fade-in {
  0%{
    transform: translate3d(0,-20px,0);
    opacity: 0;
  }
  100%{
    transform: translate3d(0,0,0);
    opacity: 1;
  }
}

@-webkit-keyframes dialog-fade-in {
  0%{
    transform: translate3d(0,-20px,0);
    opacity: 0;
  }
  100%{
    transform: translate3d(0,0,0);
    opacity: 1;
  }
}

@keyframes dialog-fade-out {
  0%{
    transform: translate3d(0,0,0);
    opacity: 1;
  }
  100%{
    transform: translate3d(0,-20px,0);
    opacity: 0;
  }
}

@-webkit-keyframes dialog-fade-out {
  0%{
    transform: translate3d(0,0,0);
    opacity: 1;
  }
  100%{
    transform: translate3d(0,-20px,0);
    opacity: 0;
  }
}