@import '../common/var-nb.scss';
@import '../mixins/utils.scss';
@import '../mixins/mixins.scss';

$--dialog-header-bottom-border-color: $--color-border-lighter;
$--dialog-default-header-background-color: $--color-background-lighter !default;
$--dialog-default-header-font-color: $--color-font !default;
$--dialog-blue-header-background-color: #2366e1 !default;
$--dialog-blue-header-font-color: #fff !default;

$--dialog-title-font-size: $--size-font-max;
/* dialog
 ----------------------------*/

 @include b(dialog) {
    .el-dialog {
      border-radius: 10px;
      .el-dialog__header {
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        border-bottom: 1px solid $--dialog-header-bottom-border-color;
        background-color: $--dialog-default-header-background-color; 
        padding: 13px 20px;
        height:50px;
        text-align: left;
        .el-dialog__title {
          color: $--dialog-default-header-font-color;
          font-size: $--dialog-title-font-size;
        }
        .el-dialog__headerbtn {
          top: 15px;
          &:focus, &:hover {
            .el-dialog__close {
              color: $--color-primary;
            }
          }
        }
      }
      .el-dialog__body {
        padding: 0;
        .nb-form {
          padding: 20px;
        }
      }
      .el-dialog__footer {
        padding-top: 0px;
      }
    } 
 }

 @include b(dialog--blueHeader) {
  .el-dialog {
    .el-dialog__header {
      background-color: $--dialog-blue-header-background-color; 
      .el-dialog__title {
        color: $--dialog-blue-header-font-color;
      }
      .el-dialog__headerbtn {
        .el-dialog__close {
          color: $--dialog-blue-header-font-color;
        }
      }
    }
  } 
}