.xy-flow {
  --node-border-default: 1px solid #bbb;
  --node-border-selected-default: 1px solid #555;

  --handle-background-color-default: #333;

  --selection-background-color-default: rgba(150, 150, 180, 0.1);
  --selection-border-default: 1px dotted rgba(155, 155, 155, 0.8);
}

.xy-flow__handle {
  background-color: var(--handle-background-color, var(--handle-background-color-default));
}

.xy-flow__node-input,
.xy-flow__node-default,
.xy-flow__node-output,
.xy-flow__node-group {
  border: var(--node-border, var(--node-border-default));

  &.selected,
  &:focus,
  &:focus-visible {
    outline: none;
    border: var(--node-border-selected, var(--node-border-selected-default));
  }
}

.xy-flow__nodesselection-rect,
.xy-flow__selection {
  background: var(--selection-background-color, var(--selection-background-color-default));
  border: var(--selection-border, var(--selection-border-default));
}