// 基础设置
.ant-modal-root {
  .ant-modal {
    transition: all 0.15s ease-in-out;
    .react-draggable {
      height: 100%;
    }
    &.modal-fullscreen {
      position: absolute;
      top: 0 !important;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100% !important;
      max-width: 100% !important;
      height: 100% !important;
      padding-bottom: 0 !important;
      .react-draggable {
        height: 100%;
        transform: translate(0, 0) !important;
      }
      .ant-modal-content {
        display: flex;
        flex-direction: column;
        height: 100%;
        .ant-modal-body {
          flex: 1;
          min-height: 0;
          margin-bottom: 10px;
          overflow-y: auto;
        }
      }
    }
    &.modal-moveable {
      .ant-modal-header {
        cursor: move;
      }
    }
  }
  .ant-modal-content {
    background: @popmodal-light-header-bg;
    .skin-dark & {
      background: @popmodal-dark-header-bg;
    }
  }
  .ant-modal-close {
    right: 10px;
    .ant-modal-close-x {
      width: 14px;
      height: 45px;
    }
  }
  .ant-modal-content {
    padding: 0;
    .ant-modal-header {
      position: relative;
      height: 45px;
      padding: 14px 34px 10px 10px !important;
      background: @popmodal-light-header-bg;
      border-bottom-color: @popmodal-light-header-border;
      .skin-dark & {
        background: @popmodal-dark-header-bg;
        border-bottom-color: @popmodal-dark-header-border;
      }
      .custom-modal-title {
        position: relative;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding-right: 20px;
        .fontSize-fontlarge & {
          right: 50px;
        }
        .zhnycomp-full-screen {
          position: absolute;
          font-size: 18px;
          right: 0px;
          .fontSize-fontlarge & {
            font-size: 20px;
          }
        }
      }
      .ant-modal-title {
        padding: 0;
        color: @blue-primary;
        .skin-red & {
          color: @red-primary;
        }
        .skin-green & {
          color: @green-primary;
        }
        .skin-gray & {
          color: @gray-primary;
        }
        .skin-dark & {
          color: #ffffff;
        }
        &::after {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 5px;
          background-color: @blue-primary;
          content: '';
          .skin-red & {
            background-color: @red-primary;
          }
          .skin-green & {
            background-color: @green-primary;
          }
          .skin-gray & {
            background-color: @gray-primary;
          }
          .skin-dark & {
            background-color: @dark-primary;
          }
        }
      }
    }
  }

  .ant-modal-body {
    padding: 10px;
    background: @popmodal-light-header-bg;
    .skin-dark & {
      background: @popmodal-dark-header-bg;
    }
  }
  .ant-modal-content {
    .ant-modal-footer {
      display: block;
      padding: 0 10px 10px;
      margin: 0;
      border-top: none;
      background: @popmodal-light-header-bg;
      .skin-dark & {
        background: @popmodal-dark-header-bg;
      }
      .modal-footer-btns {
        display: flex;
        align-items: center;
        height: 40px;
        padding: 0 10px;
        background-color: @page-footer-light-bg;
        &::after {
          display: none;
        }
        .ant-space {
          display: inline-flex;
          &::after {
            display: none;
          }
          .ant-space-item {
            &::after {
              display: none;
            }
          }
        }
        .ant-btn {
          margin: 0;
          position: relative;
        }
        .skin-dark & {
          background-color: @page-footer-dark-bg;
        }
        .fontSize-fontlarge & {
          height: 52px;
        }
      }
    }
  }
}