diagram.css

html,
body {
  overflow: hidden;
  margin: 0;
  color: var(--glsp-foreground);
}

/* Graph */
.sprotty {
  user-select: none;
}
.sprotty > div:focus-visible,
.sprotty-graph:focus {
  outline: none;
}
.sprotty svg:where(.sprotty-graph, .sprotty-empty) {
  border: none;
}
.sprotty-graph {
  background: var(--glsp-editor-background);
  font-size: 10pt;
  height: 100%;
}
.grid .sprotty-graph,
.sprotty-graph.grid {
  background-image: radial-gradient(var(--glsp-grid) 1px, transparent 0);
  background-size: 16px 16px;
  background-position: 8px 8px;
}

/* Pool / Lane */
.pool .sprotty-label,
.lane .sprotty-label {
  text-anchor: middle;
  cursor: default;
  fill: var(--glsp-editor-foreground);
}
.pool > .sprotty-node,
.lane > .sprotty-node {
  cursor: default;
}
.pool > .sprotty-node {
  stroke: var(--glsp-border);
  fill: transparent;
}
.lane > .sprotty-node {
  stroke: var(--lane-color, var(--glsp-border));
  fill: var(--glsp-lane-bg-fallback);
}
@supports (fill: color-mix(in srgb, var(--lane-color, var(--glsp-lane-bg)), transparent 75%)) {
  .lane > .sprotty-node {
    --lane-color: var(--glsp-lane-bg);
    stroke: var(--glsp-border);
    fill: color-mix(in srgb, var(--lane-color, var(--glsp-lane-bg)), transparent 75%);
  }
}
.pool > .pool-label-rect {
  fill: var(--glsp-node);
}
.lane-resize-handle {
  cursor: row-resize;
}
.lane-resize-handle line {
  stroke: var(--glsp-editor-selected);
  stroke-width: 2px;
}
.lane-resize-handle.mouseover line {
  stroke-width: 3px;
}
.lane-resize-handle .lane-resize-mouse-handle {
  fill: transparent;
}

/* Nodes */
.sprotty-node {
  fill: var(--glsp-node);
  stroke: var(--glsp-border);
  stroke-width: 1px;
  font-weight: bold;
  cursor: pointer;
}
.sprotty-node:not(.selected) {
  stroke-width: 1px;
}
.sprotty-resize-handle.selected {
  fill: var(--glsp-editor-selected);
  r: 4px;
  stroke: var(--glsp-editor-foreground);
  stroke-width: 1;
}
.sprotty-resize-handle[data-kind='bottom-right'],
.sprotty-resize-handle[data-kind='top-left'] {
  cursor: nwse-resize;
}
.sprotty-resize-handle[data-kind='bottom-left'],
.sprotty-resize-handle[data-kind='top-right'] {
  cursor: nesw-resize;
}
.sprotty-node.sprotty-task-node {
  stroke-width: 1px;
}
g[class^='end'] .sprotty-node {
  stroke-width: 2px;
}
.sprotty-node-decorator {
  stroke: var(--glsp-editor-foreground);
  fill: var(--glsp-editor-foreground);
  text-anchor: middle;
}
.sprotty-node-decorator path {
  fill: none;
}
.subProcessCall .sprotty-node {
  stroke-width: 2px;
}
.subProcessCall svg .sprotty-node {
  stroke-width: 1px;
}
.warning > .sprotty-node {
  filter: unset !important;
  stroke: var(--glsp-warning-foreground) !important;
}
.error > .sprotty-node {
  filter: unset !important;
  stroke: var(--glsp-error-foreground) !important;
}
.sprotty-node.selected {
  stroke-width: 2px;
  stroke: var(--glsp-editor-selected) !important;
}

/* Edges */
.sprotty-edge {
  stroke: var(--glsp-editor-foreground);
  fill: none;
  stroke-width: 1px;
  cursor: pointer;
}
.sprotty-edge.selected,
.sprotty-edge.mouseover:not(.selected) path {
  stroke-width: 2px;
  stroke: var(--glsp-editor-selected);
}
.sprotty-edge.arrow {
  fill: var(--glsp-editor-foreground);
}
.sprotty-edge.selected .arrow {
  fill: var(--glsp-editor-selected);
  stroke: var(--glsp-editor-selected);
}
.sprotty-edge > .sprotty-routing-handle {
  fill: var(--glsp-foreground);
  stroke: none;
  z-index: 1000;
  r: 3;
  stroke: var(--glsp-editor-foreground);
  stroke-width: 1;
  stroke-dasharray: none;
  cursor: move;
}
.sprotty-edge > .sprotty-routing-handle[data-kind='line'] {
  opacity: 0.35;
}
.sprotty-edge > .sprotty-routing-handle.selected {
  fill: var(--glsp-editor-selected);
}
.sprotty-edge > .sprotty-routing-handle.mouseover {
  stroke: var(--glsp-editor-selected);
  stroke-width: 1;
}
.sprotty-edge.mouseover:not(.selected) {
  stroke-width: 3px;
}
.sprotty-edge .sprotty-label div {
  text-align: center;
}

/* Icon / Label*/
.sprotty-label {
  font-size: 12px;
  cursor: pointer;
  text-align: center;
  max-height: 100%;
  overflow: hidden;
}
.node-child-label > div {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.processAnnotation .sprotty-label div {
  text-align: left;
  justify-content: start;
}
.sprotty-icon {
  border-radius: 3px;
  cursor: pointer;
}
.sprotty-icon i {
  display: flex;
  font-size: 14px;
}
.sprotty-icon img {
  height: 14px;
  width: 14px;
  object-fit: contain;
}
.sprotty-icon.icon-small i {
  font-size: 15px;
}
.sprotty-icon.icon-small img {
  height: 14px;
  width: 16px;
  object-fit: contain;
}
.sprotty-icon-svg path {
  fill: var(--glsp-foreground);
}

/* Tooltip */
.sprotty-popup {
  display: none;
}

/* Comments */
.processAnnotation .sprotty-node,
.association.sprotty-edge {
  stroke-dasharray: 5, 5;
}

/* Tools */
.sprotty-node.marquee {
  fill: var(--glsp-editor-foreground);
  opacity: 0.2;
}
.node-creation-mode .sprotty-node {
  cursor: copy;
}
.marquee-mode [class^='sprotty-'],
.edge-creation-select-target-mode [class^='sprotty-'],
.edge-creation-select-target-mode .node-child-label {
  cursor: crosshair;
}
.edge-modification-not-allowed-mode,
.edge-modification-not-allowed-mode [class^='sprotty-'],
.edge-modification-not-allowed-mode .node-child-label {
  cursor: not-allowed;
}
.negative-area {
  opacity: 0.3;
}

/* Projection Bars */
.projection-graph {
  width: 100%;
  height: 100%;
  outline: none;
}
.sprotty-projection-bar.horizontal {
  position: absolute;
  width: 100%;
  height: 10px;
  left: 0;
  bottom: 0;
}
.sprotty-projection-bar.vertical {
  position: absolute;
  width: 10px;
  height: 100%;
  right: 0;
  top: 0;
}
.projection-scroll-bar {
  opacity: 0.2;
  background: transparent;
  background-color: var(--glsp-editor-foreground);
  z-index: 1;
}
.sprotty-projection-bar.horizontal .sprotty-projection,
.sprotty-projection-bar.horizontal .sprotty-viewport {
  position: absolute;
  height: 100%;
  top: 0;
}
.sprotty-projection-bar.vertical .sprotty-projection,
.sprotty-projection-bar.vertical .sprotty-viewport {
  position: absolute;
  width: 100%;
  left: 0;
}
.sprotty-projection-bar.vertical.bordered-projection-bar {
  width: 10px;
}
.sprotty-projection-bar.horizontal.bordered-projection-bar {
  height: 10px;
}

/* General */
.sprotty-missing {
  stroke-width: 1;
  stroke: #f00;
  fill: #f00;
  font-size: 14pt;
  text-anchor: middle;
}
svg {
  border: none;
}

/* UI Extension */
.ui-extension.hidden {
  display: none;
  visibility: hidden;
  opacity: 0;
}