@resizable-header-with: 3px;

.resizable-header-cell {
  position: relative;

  &-handler {
    position: absolute;
    top: 0;
    z-index: 9;
    height: 100%;
    width: @resizable-header-with;
    cursor: col-resize;

    &-inner {
      height: 100%;
      width: 100%;
      margin-left: auto;
      transition: background-color 0.3s ease;
    }

    &:hover,
    &:active {
      .resizable-header-cell-handler-inner {
        background-color: #4284e5;
        .skin-red & {
          background-color: #b8141a;
        }
        .skin-green & {
          background-color: #497174;
        }
        .skin-gray & {
          background-color: #3d4460;
        }
        .skin-dark & {
          background-color: #5e76d7;
        }
      }
    }
  }

  // 虚拟手柄样式
  &-virtual-handler {
    width: @resizable-header-with;
    cursor: col-resize;
    pointer-events: none; // 防止虚拟手柄接收鼠标事件

    .resizable-header-cell-handler-inner {
      height: 100%;
      width: 100%;
      background-color: #4284e5;

      .skin-red & {
        background-color: #b8141a;
      }
      .skin-green & {
        background-color: #497174;
      }
      .skin-gray & {
        background-color: #3d4460;
      }
      .skin-dark & {
        background-color: #5e76d7;
      }
    }
  }
}