@use './variables.scss' as *;

.custom-tooltip {
  max-width: 1000px;
}

.customDialog--pushObject {
  max-height: 60vh;
  border-radius: 8px !important;
  overflow-y: hidden;
  .el-dialog__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-height: calc(60vh - 100px);
    overflow-y: auto;
  }
}

$message-box-content-padding--default: 0;
$message-box-content-padding--icon: 36px;

.customMessageBox {
  padding: 20px 24px !important;
  border-radius: 8px !important;
  color: rgba(0, 0, 0, 0.88);
  .el-message-box__title {
    display: flex;
    align-items: center;
    font-weight: 550;
    font-size: 16px;
  }
  .el-message-box__content {
    font-size: 14px;
  }
}

.customMessageBox--icon {
  @extend .customMessageBox;
  .el-message-box__title::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 12px;
    background-size: 100% 100%;
  }
  .el-message-box__content {
    padding-left: $message-box-content-padding--icon;
  }
}

.customMessageBox--default {
  @extend .customMessageBox;
  .el-message-box__content {
    padding-left: $message-box-content-padding--default;
  }
}

.customMessageBox--primary {
  @extend .customMessageBox--icon;
  .el-message-box__title::before {
    background-image: url('@/assets/images/message-box/primary@1X.png');
  }
}

.customMessageBox--warning {
  @extend .customMessageBox--icon;
  .el-message-box__title::before {
    background-image: url('@/assets/images/message-box/warning@1X.png');
  }
}

.customMessageBox--error {
  @extend .customMessageBox--icon;
  .el-message-box__title::before {
    background-image: url('@/assets/images/message-box/error@1X.png');
  }
}

.custom-el-button {
  --el-border-color: #1890ff;
  --el-text-color-regular: #1890ff;
  --el-color-primary: #fff;
  --el-color-primary-light-9: #1890ff;
}