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

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

.custom-tooltip--opacity0 {
  opacity: 0;
}

.customDialog--pushObject {
  height: 50vh;
  max-height: 60vh;
  border-radius: 8px !important;
  overflow-y: hidden;
  .el-dialog__body {
    width: 100%;
    max-height: calc(60vh - 190px);
    overflow-y: auto;
  }
}

.basic-dialog--custom {
  max-height: 60vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  .el-dialog__body {
    flex: 1;
  }
}

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

.el-scrollbar--custom {
  max-width: 520px;
  .el-scrollbar {
    max-width: 515px;
  }
}

.cascader-popper--custom {
  .el-checkbox,
  .el-radio {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
  }

  .el-cascader-node {
    padding-left: 34px;
  }

  .el-checkbox__input,
  .el-radio__input {
    position: absolute;
    left: 20px;
  }
}

.el-table .row--highlight {
  color: $primary-color;
  background: rgba($primary-color, 0.2);
}