src/components/graph/plugins/nodeResizer/styles.css
.solid-flow {
  --xy-resize-background-color-default: #3367d9;
}

.solid-flow__resize-control {
  position: absolute;

  &.left,
  &.right {
    cursor: ew-resize;
  }

  &.top,
  &.bottom {
    cursor: ns-resize;
  }

  &.top.left,
  &.bottom.right {
    cursor: nwse-resize;
  }

  &.bottom.left,
  &.top.right {
    cursor: nesw-resize;
  }
}

.solid-flow__resize-control.handle {
  width: 4px;
  height: 4px;
  border: 1px solid #fff;
  border-radius: 1px;
  background-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));
  transform: translate(-50%, -50%);

  &.left {
    left: 0;
    top: 50%;
  }

  &.right {
    left: 100%;
    top: 50%;
  }

  &.top {
    left: 50%;
    top: 0;
  }

  &.bottom {
    left: 50%;
    top: 100%;
  }

  &.top.left {
    left: 0;
  }

  &.bottom.left {
    left: 0;
  }

  &.top.right {
    left: 100%;
  }

  &.bottom.right {
    left: 100%;
  }
}

/* line styles */
.solid-flow__resize-control.line {
  border-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));
  border-width: 0;
  border-style: solid;

  &.left,
  &.right {
    width: 1px;
    height: 100%;
    transform: translate(-50%, 0);
    top: 0;
  }

  &.top,
  &.bottom {
    width: 100%;
    height: 1px;
    transform: translate(0, -50%);
    left: 0;
  }

  &.left {
    left: 0;
    border-left-width: 1px;
  }

  &.right {
    left: 100%;
    border-right-width: 1px;
  }

  &.top {
    top: 0;
    border-top-width: 1px;
  }

  &.bottom {
    top: 100%;
    border-bottom-width: 1px;
  }
}
