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

.custom-tooltip {
  width: 200px;
  max-height: 200px;
  overflow-y: auto;
}

.customDialog--pushObject {
  height: 60vh;
  border-radius: 8px !important;
  .el-dialog__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    height: calc(100% - 50px);
    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--default {
  @extend .customMessageBox;
  .el-message-box__content {
    padding-left: $message-box-content-padding--default;
  }
}

.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--weak {
  @extend .customMessageBox--icon;
  .el-message-box__title::before {
    background-image: url('@/assets/images/message-box/weak@1X.png');
  }
}

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

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