// Small screen / tablet
@media (min-width: @screen-sm) {
  .modal-sm .ant-modal {
    max-width: @modal-sm;
    width: auto !important;
  }
}

// Medium screen / desktop
@media (min-width: @screen-md) {
  .modal-md .ant-modal {
    max-width: @modal-md;
    width: auto !important;
  }
}

// Large screen / wide desktop
@media (min-width: @screen-lg) {
  .modal-lg .ant-modal {
    max-width: @modal-lg;
    width: auto !important;
  }
}

// Extra extra large screen / large descktop
@media (min-width: @screen-xxl) {
  .modal-xl .ant-modal {
    max-width: @modal-xl;
    width: auto !important;
  }
}

// 自定义模态框时非常有用，主要运用于查看、编辑页
.modal {
  &-header {
    padding: 16px 24px;
    margin: -24px -24px 24px -24px;
    border-radius: @border-radius-base @border-radius-base 0 0;
    background: @component-background;
    border-bottom: @border-width-base @border-style-base @border-color-split;
    display: flex;
    justify-content: space-between;
  }
  &-title {
    font-size: @font-size-lg;
    font-weight: 500;
    line-height: 22px;
    color: @heading-color;
    small {
      color: @muted-color;
      font-size: 12px;
      margin-left: @layout-gutter;
    }
  }
  &-spin {
    display: block;
    min-height: 150px;
    line-height: 150px;
    text-align: center;
  }
  &-footer {
    border-top: @border-width-base @border-style-base @border-color-split;
    padding: 10px 16px;
    text-align: right;
    border-radius: 0 0 @border-radius-base @border-radius-base;
    margin: 24px -24px -24px -24px;
  }
  &-include-tabs {
    nz-tabset {
      margin-top: -16px;
    }
  }
  &-body-nopadding {
    .ant-modal-body {
      padding: 0 !important;
    }
  }
}