.canvas-table-container {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgb(222, 233, 246);
  box-sizing: border-box;

  // 防止滚动穿透
  touch-action: none;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: auto;

  canvas {
    cursor: default;
    touch-action: none;
  }

  .canvas-table-filter-popover {
    background: #fff;
    box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
      0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
    border-radius: 2px;

    .ant-checkbox-wrapper {
      width: 100%;

      &:hover {
        background-color: #f5f5f5;
      }
    }
  }

  .canvas-table-cell-overlay {
    // 覆盖层可以接收用户交互
    pointer-events: auto;
    box-sizing: border-box;

    // 确保内容在覆盖层内居中对齐
    display: flex;
    align-items: center;

    // 处理溢出
    overflow: hidden;

    // 确保覆盖层在Canvas之上，使用绝对定位
    position: absolute;

    // 固定列覆盖层的z-index会通过内联样式设置为更高值

    // 覆盖层内的按钮、链接等元素可以正常交互
    a,
    button,
    input,
    select,
    textarea {
      pointer-events: auto;
    }
  }

  // 单元格内容容器的直接子元素可以响应事件
  .canvas-table-cell-content > * {
    pointer-events: auto;
  }

  // Canvas 元素在覆盖层下方
  canvas {
    position: relative;
    z-index: 0;
  }

  // 全屏样式
  &.canvas-table--fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 9999 !important;
    margin: 0 !important;
    background-color: #fff;
  }

  // 退出全屏按钮
  .canvas-table--exit-fullscreen {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 8px 16px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
    z-index: 10000;
    font-size: 14px;
    user-select: none;
    transition: background 0.3s;

    &:hover {
      background: rgba(0, 0, 0, 0.9);
    }
  }
}