:global {
  .modal-wrap-resizing,
  .modal-wrap-resized {
    .ant-modal {
      position: absolute;
      left: 0 !important;
      top: 0 !important;
      margin: 0 !important;
      width: var(--modal-width) !important;
      transition: none;
    }

    .ant-modal-content {
      height: var(--modal-height);
      transition: none;
      display: flex;
      flex-direction: column;
    }

    .ant-modal-body {
      flex: 1;
      overflow-y: auto;
    }

    .ant-modal-header {
      flex-shrink: 0;
    }

    .ant-modal-footer {
      flex-shrink: 0;
    }
  }

  // 确保 Modal 内容不会阻止 resize-handle 的鼠标事件
  .ant-modal-content {
    pointer-events: auto;
  }
}

// 拖动调整大小的手柄样式
.resize-handle {
  position: absolute;
  z-index: 9999;  // 确保在 Modal 内容之上
  background: transparent;
  transition: all 0.2s ease;
  pointer-events: auto !important;  // 确保可以接收鼠标事件
  opacity: 0;

  &:hover {
    opacity: 1;
    background-color: rgba(24, 144, 255, 0.5);
  }
}

// 当鼠标悬停在 modal 上时显示手柄
.ant-modal:hover .resize-handle,
div:hover > .resize-handle {
  opacity: 0.5;
  background: rgba(24, 144, 255, 0.15);
}


// 边缘手柄
.resize-handle-e {
  right: 0;
  top: 0;
  bottom: 0;
  width: 8px;
  cursor: e-resize;
}

.resize-handle-w {
  left: 0;
  top: 0;
  bottom: 0;
  width: 8px;
  cursor: w-resize;
}

.resize-handle-s {
  bottom: 0;
  left: 0;
  right: 0;
  height: 8px;
  cursor: s-resize;
}

.resize-handle-n {
  top: 0;
  left: 0;
  right: 0;
  height: 8px;
  cursor: n-resize;
}

// 角落手柄
.resize-handle-se {
  right: 0;
  bottom: 0;
  width: 12px;
  height: 12px;
  cursor: se-resize;
}

.resize-handle-sw {
  left: 0;
  bottom: 0;
  width: 12px;
  height: 12px;
  cursor: sw-resize;
}

.resize-handle-ne {
  right: 0;
  top: 0;
  width: 12px;
  height: 12px;
  cursor: ne-resize;
}

.resize-handle-nw {
  left: 0;
  top: 0;
  width: 12px;
  height: 12px;
  cursor: nw-resize;
}