// @import "../mixins/mixins";
// @import "../config/variables";
// @import "../config/popup";
// @import "./button";
// @import "./input";

// @include b(message-box) {
//   display: inline-block;
//   width: $--msgbox-width;
//   padding-bottom: 10px;
//   vertical-align: middle;
//   background-color: $--color-white;
//   border-radius: $--msgbox-border-radius;
//   border: 1px solid $--border-color-lighter;
//   font-size: $--msgbox-font-size;
//   box-shadow: $--box-shadow-light;
//   text-align: left;
//   overflow: hidden;
//   backface-visibility: hidden;

//   @include e(wrapper) {
//     position: fixed;
//     top: 0;
//     bottom: 0;
//     left: 0;
//     right: 0;
//     text-align: center;

//     &::after {
//       content: "";
//       display: inline-block;
//       height: 100%;
//       width: 0;
//       vertical-align: middle;
//     }
//   }

//   @include e(header) {
//     position: relative;
//     padding: $--msgbox-padding-primary;
//     padding-bottom: 10px;
//   }

//   @include e(title) {
//     padding-left: 0;
//     margin-bottom: 0;
//     font-size: $--msgbox-font-size;
//     line-height: 1;
//     color: $--color-text-primary;
//   }

//   @include e(headerbtn) {
//     position: absolute;
//     top: $--msgbox-padding-primary;
//     right: $--msgbox-padding-primary;
//     padding: 0;
//     border: none;
//     outline: none;
//     background: transparent;
//     font-size: $--message-close-size;
//     cursor: pointer;

//     .el-message-box__close {
//       color: $--color-info;
//     }

//     &:focus, &:hover {
//       .el-message-box__close {
//         color: $--color-primary;
//       }
//     }

//   }

//   @include e(content) {
//     position: relative;
//     padding: 10px $--msgbox-padding-primary;
//     color: $--msgbox-content-color;
//     font-size: $--msgbox-content-font-size;
//   }

//   @include e(input) {
//     padding-top: 15px;

//     & input.invalid {
//       border-color: $--color-danger;
//       &:focus {
//         border-color: $--color-danger;
//       }
//     }
//   }

//   @include e(status) {
//     position: absolute;
//     top: 50%;
//     transform: translateY(-50%);
//     font-size: 24px !important;

//     &::before {
//       // 防止图标切割
//       padding-left: 1px;
//     }

//     + .el-message-box__message {
//       padding-left: 36px;
//       padding-right: 12px;
//     }

//     &.el-icon-success {
//       color: $--msgbox-success-color;
//     }

//     &.el-icon-info {
//       color: $--msgbox-info-color;
//     }

//     &.el-icon-warning {
//       color: $--msgbox-warning-color;
//     }

//     &.el-icon-error {
//       color: $--msgbox-danger-color;
//     }
//   }

//   @include e(message) {
//     margin: 0;

//     & p {
//       margin: 0;
//       line-height: 24px;
//     }
//   }

//   @include e(errormsg) {
//     color: $--color-danger;
//     font-size: $--msgbox-error-font-size;
//     min-height: 18px;
//     margin-top: 2px;
//   }

//   @include e(btns) {
//     padding: 5px 15px 0;
//     text-align: right;

//     & button:nth-child(2) {
//       margin-left: 10px;
//     }
//   }

//   @include e(btns-reverse) {
//     flex-direction: row-reverse;
//   }

//   // centerAlign 布局
//   @include m(center) {
//     padding-bottom: 30px;

//     @include e(header) {
//       padding-top: 30px;
//     }

//     @include e(title) {
//       position: relative;
//       display: flex;
//       align-items: center;
//       justify-content: center;
//     }

//     @include e(status) {
//       position: relative;
//       top: auto;
//       padding-right: 5px;
//       text-align: center;
//       transform: translateY(-1px);
//     }

//     @include e(message) {
//       margin-left: 0;
//     }

//     @include e((btns, content)) {
//       text-align: center;
//     }

//     @include e(content) {
//       $padding-horizontal: $--msgbox-padding-primary + 12px;

//       padding-left: $padding-horizontal;
//       padding-right: $padding-horizontal;
//     }
//   }
// }

// .msgbox-fade-enter-active {
//   animation: msgbox-fade-in .3s;
// }

// .msgbox-fade-leave-active {
//   animation: msgbox-fade-out .3s;
// }

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

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