@import "../vars.less";
.hive-modal-wrap {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 10001;
  overflow: auto;
  .hive-modal-mask {
    background: rgba(0, 0, 0, .5);
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
  }
}
.modal-wrap {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 10001;
  background: rgba(0, 0, 0, .5);
  overflow: auto;
}

.hive-modal {
  width: 385px;
  background: #ffffff;
  margin: 0 auto 20px;
  position: relative;
  top: 30vh;
  border-radius: @modal-border-radius-default;

  &.hive-modal--show{
      animation: ModalShow .3s ease-in-out forwards;
  }
  &.hive-modal--hide{
      animation: ModalHie .3s ease-in-out forwards;
  }
  .hive-modal-header {
    .hive-modal-title {
      font-size: @title-level-3-size;
      color: @text-color;
      padding: 20px 24px;
      line-height: 22px;
      position: relative;

      .hive-modal__close {
        float: right;
        font-size: @text-level-1-size;
        padding: 5px;
        cursor: pointer;
        color: @text-color-lighter-2;
      }

      &--icon {
        padding-left: 63px;

        .hive-modal-icon {
          font-size: 24px;
          position: absolute;
          left: 20px;
          top: 50%;
          transform: translateY(-50%);
        }

        .hive-modal-icon--error {
          color: @error-color;
        }

        .hive-modal-icon--warning {
          color: @warning-color
        }

        .hive-modal-icon--success {
          color: @success-color
        }

        .hive-modal-icon--info {
          color: @info-color
        }
      }
    }
  }

  .hive-modal-content {
    padding: 18px 24px 30px;
    position: relative;
    color: @text-color-lighter-1;

    &::after {
      content: ' ';
      width: 100%;
      height: 1px;
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      background: #F0F0F0;
    }
  }

  .hive-modal-footer {
    padding: 12px 8px 12px 0px;
    text-align: right;

    .hive-button {
      border: 0px;
      min-width: auto;
      padding: 0px 18px;
      line-height: 32px;
      height: 32px;
      color: @primary-color;
      background:none;
    }

    .hive-button+.hive-button {
      margin-left: 4px;
    }
  }
}