.resizableColumnsGutter {
  width: var(--resizable-gutter-size, var(--vj-gutter-size, 10px));
  cursor: col-resize;
  background: transparent;
  border-radius: 4px;
  position: relative;
  user-select: none;
  touch-action: none;
}

.resizableColumnsGutter::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 25%;
  height: 50%;
  width: 1px;
  transform: translateX(-50%);
  background: transparent;
  transition: background 120ms ease;
}

.resizableColumnsGutter[data-axis='y']::before {
  left: 25%;
  top: 50%;
  width: 50%;
  height: 1px;
  transform: translateY(-50%);
}

.resizableColumnsGutter:hover::before,
.resizableColumnsGutter.dragging::before {
  background: var(--accent-color);
}