$prefixCls: $lib-name + "-modal";

@keyframes modal-down {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes modal-scale {
  0% {
    transform: translate(-50%, -50%) scale(0.8);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}

.#{$animation-prefix}modal-down-enter-active {
  animation: modal-down $animation-time;
  .#{$prefixCls}-box-content-wrapper {
    animation: modal-scale $animation-time;
  }
}
.#{$animation-prefix}modal-down-leave-active {
  animation: modal-down $animation-time reverse;
  .#{$prefixCls}-box-content-wrapper {
    animation: modal-scale $animation-time reverse;
  }
}

.#{$prefixCls}-box {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 120;
  .msk {
    background-color: $background-color-dark;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
  .#{$prefixCls}-box-content-wrapper {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    box-shadow: $box-shadow-base;
    .#{$prefixCls}-box-close {
      position: absolute;
      right: 16px;
      top: 10px;
      color: $sub-text-color-light;
      cursor: pointer;
      &:hover {
        color: $primary-color;
      }
      .ans-icon-close {
        font-size: 12px;
      }
    }
    .#{$prefixCls}-box-content {
      background-color: $background-color-base;
      border: 0;
      border-radius: 4px;
      .#{$prefixCls}-content-header {
        .#{$prefixCls}-header-inner {
          height: 55px;
          padding: 0 25px;
          font-size: 16px;
          line-height: 55px;
          color: $title-color-light;
          font-weight: 500;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          box-sizing: border-box;
          border-bottom: 1px solid $border-color-base;
        }
      }
      .#{$prefixCls}-content-body {
        padding: 25px;
        font-size: 14px;
        line-height: 1.5;
        color: $content-color-light;
        box-sizing: border-box;
      }
      .#{$prefixCls}-content-footer {
        border-top: 1px solid $border-color-base;
        padding: 10px 25px;
        text-align: right;
      }
    }
  }
}