@charset "UTF-8";
@import "./common/var.css";
@import "./common/popup.css";
@import "./button.css";
@import "./input.css";

@component-namespace el {

  @b message-box {
    text-align: left;
    display: inline-block;
    vertical-align: middle;
    background-color: var(--color-white);
    width: var(--msgbox-width);
    border-radius: var(--msgbox-border-radius);
    font-size: var(--msgbox-font-size);
    overflow: hidden;
    backface-visibility: hidden;
    @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;
      }
    }

    @e header {
      position: relative;
      padding: 20px 20px 0;
    }

    @e headerbtn {
      position: absolute;
      top: 19px;
      right: 20px;
      background: transparent;
      border: none;
      outline: none;
      padding: 0;
      cursor: pointer;

      .el-message-box__close {
        color: #999;
      }
      
      &:focus, &:hover {
        .el-message-box__close {
          color: var(--color-primary);
        }
      }

    }

    @e content {
      padding: 30px 20px;
      color: var(--msgbox-content-color);
      font-size: var(--msgbox-content-font-size);
      position: relative;
    }

    @e input {
      padding-top: 15px;
      & input.invalid {
        border-color: var(--color-danger);
        &:focus {
          border-color: var(--color-danger);
        }
      }
    }

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

    @e title {
      padding-left: 0;
      margin-bottom: 0;
      font-size: var(--msgbox-font-size);
      font-weight: bold;
      height: 18px;
      color: #333;
    }

    @e message {
      margin: 0;

      & p {
        margin: 0;
        line-height: 1.4;
      }
    }

    @e btns {
      padding: 10px 20px 15px;
      text-align: right;

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

    @e btns-reverse {
      flex-direction: row-reverse;
    }

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

      &.el-icon-circle-check {
        color: var(--msgbox-success-color);
      }

      &.el-icon-information {
        color: var(--msgbox-info-color);
      }

      &.el-icon-warning {
        color: var(--msgbox-warning-color);
      }

      &.el-icon-circle-cross {
        color: var(--msgbox-danger-color);
      }
    }
  }
}

.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;
  }
}