:root {
    --nodex: 0px;
    --nodey: 0px;
}

body {
  width: 100%;
  height: 100%;
  margin:0;
  font-family: consolas;
  color: white;
}

.hidden {
    visibility: hidden;
}

.collapsed {
    visibility: collapse;
}

.shown {
    visibility: visible;
}

.display-none {
    display: none;
}

#node-editor {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: #101010;
}

#node-editor-editor {
    position: absolute;
    z-index: 4;
}

#node-editor-editor.hash-view {
    background-color: unset;
}

#node-editor-editor-panzoom {
    pointer-events: all;
}

svg {
    user-select: none;
}

.graph-ui {
    display: flex;
    position: absolute;
    right: 100px;
    top: 100px;
    flex-direction: row;
    gap: 8px;
}

.graph-ui ion-icon {
    cursor: pointer;
    width: 1.5em;
    height: 1.5em;
    color: #ccc;
}

.graph-ui ion-icon:hover {
    color: #fff;
}

.edit-value {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #00000011;
}

.edit-value .more {
    cursor: pointer;
}

.edit-value .centering {
    position: absolute;
    width: 32vw;
    display: flex;
    flex-direction: column;
}

.edit-value.none {
    left: -1000%;
}

.edit-value textarea {
    width: 32vw;
    font-size: (1em + 1vh);
    outline: none;
    resize: none;
}

.edit-value label {
    font-size: calc(1em + 2vh);
    align-self: center;
}

.edit-value textarea {
    height: 64em;
}

.edit-value.ref input {
    position: relative;
    left: 0;
}

.autocomplete-list {
  position: relative;
  z-index: 999;
  overflow-y: scroll;
  overflow-x: hidden;
  background: #000;
}

.autocomplete-item {
  line-height: 1.2em;
  padding: .2em;
  padding-left: .4em;
}

.autocomplete-item.selected {
  background: #333;
}

.autocomplete-group {
  line-height: 1.4em;
  padding: .2em;
  font-weight: bold;
  padding-top: .4em;
  border-top: 1px solid #111;
}

.edit-value .input {
    width: 256px;
}

.search-input.hidden {
    left: -1000px;
}

#arrow polyline {
    stroke: #fff;
    stroke-width: 2;
    fill: none
}

.node {
    cursor: pointer;
    transform: translate(var(--tx), var(--ty))
}

.node:has(text .node-name) {
  transform: scale(calc(1 / min(var(--zoom-scale), 1))) translate(calc(var(--tx) * min(var(--zoom-scale), 1)), calc(var(--ty) * min(var(--zoom-scale), 1)));
  stroke: #000;
  rx: 1;
  stroke-width: 2;
}

.node:hover {
    opacity: 1 !important;
}

.node .fill {
    opacity: 0;
}

@keyframes flash {
    0% {
      transform: scale(1);
    }

    2% { 
      transform: scale(1.15);
    }

    100% {
      transform: scale(1);
    }
}

.node .shape {
    stroke: #66ccff;
    stroke-width: 2;
}

.node .shape.flash {
  animation: 1s ease-out infinite flash;
}

.node .shape.flash-transition, 
.node .shape.none.flash-transition, 
.node .shape.js-script.flash-transition {
  transform-origin: center;
}

.node:hover .shape {
    stroke-width: 2;
    stroke: #3fc
}

.node.selected .shape {
    fill: #fff;
}

.node.search-result .shape {
  fill: #1CBC83;
}

.node .shape.js-script {
    transform-box: fill-box;
    transform-origin: 50% 50%;
    transform: rotate(45deg);
    fill: none;
    stroke-width: 2px;
    stroke: #66ccff;
}

.node.selected .shape.js-script {
    stroke: #fcc;
}

.node .shape.none {
    stroke-width: 2px;
    stroke: #66ccff;
}

.node .shape.error {
    fill: #FF0000 !important;
}

.node.selected .shape.none {
    stroke: #fcc;
}

.distance-0 {
    opacity: 1;
}

.distance-1 {
    opacity: 0.85;
} 

.distance-2 {
    opacity: 0.666;
} 

.distance-3 {
    opacity: 0.333;
} 

.distance-far {
    opacity: 0.1;
}

#node-info-wrapper {
  position: absolute;
  top: 0;
  bottom: 0;

  display: flex;
  flex-flow: row nowrap;
  pointer-events: none;
  width: 100%;
}

#node-info-inner-wrapper {
  display: flex;
  flex-flow: column nowrap;
  max-width: 400px;
  width: fit-content;
  flex-basis: fit-content;
}

#node-info-wrapper .spacer.inner {
  flex-basis: var(--nodex);
  flex-shrink: 1;
}

#node-info-wrapper .spacer {
    pointer-events: none;
}

#node-info-wrapper .spacer.before {
    flex-basis: var(--nodey);
    flex-shrink: 1;
}

.node-info {
    flex-shrink: 0; 
    z-index: 16;
    border: 1px solid white;
    background: #111;
    padding: .4em;
    color: white;
    display: flex;
    gap: .6em;
    flex-direction: column;
    pointer-events: all;
    max-height: 100%;
    overflow: auto;
}

@media (max-width: 600px) {
  #node-info-wrapper {
    left: max(min(25vw, calc(var(--nodex) - 75vw)), 0vw);
    max-width: 75vw;
  }

    #node-info-wrapper:focus-within {
      width: calc(100vw - 2px - .8em);
      max-width: 100vw;
      height: calc(100vh - 2px - .8em);
      left: 0;
      right: 0;
    }

    #node-info-wrapper:focus-within {
        width: 100%;
    }

    #node-info-wrapper:focus-within .spacer {
        flex-basis: 0;
    }

    #node-info-wrapper:focus-within .node-info {
        flex-grow: 1;
    }

    #node-info-wrapper.initial-layout {
      visibility: hidden;
    }
}

.node-info .args {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.node-info .args span.clickable {
    cursor: pointer;
    text-decoration: underline dotted;
}

.node-info .inputs {
    display: flex;
    flex-direction: column;
    gap: .4em;
}

.node-info .value-input, .node-info .id-display {
    display: flex;
    flex-direction: row;
    gap: .5em;
}

.node-info .value-input label {
    flex-basis: 4em;
}

.node-info .id-display .label {
  flex-basis: 6em;
}

.node-info .value-input input, .node-info .id-display .id {
    flex-grow: 1;
}

.node-info autocomplete-list {
  flex-grow: 1;
}

#node-editor-code-editor {
  display: none;
}

#node-editor-code-editor.code-editor-displayed  {
  display: block;
}

.buttons {
  flex-direction: column;
  line-height: 1.4;
}


/* result props */
#node-editor-result {
    position: fixed;
    bottom: 32px;
    left: 32px;
    max-width: 33%;
    z-index: 6;
    touch-action: none;
}

.result.error {
    color: red;
}

#node-editor-background-result {
  z-index: 0;
  position: absolute;
  width: 100%;
  height: 100%;
}


text {
    user-select: none;
    fill: white;
}

.link.selected {
    stroke: red;
}

.link {
    stroke: #ccc;
}

svg.edge-info.selected rect {
    fill: red;
}

.insert-node {
  transform: translate(var(--tx), var(--ty))
}

.insert-node,
#dummy-add-node {
    cursor: pointer;
    stroke: #fff;
    stroke-width: 32;
    stroke-opacity: 1;
}

.insert-node .circle,
#dummy-add-node .circle {
    fill-opacity: 0.5;
}

.node text {
    filter: url(#flood-background)
}

.node text tspan {
  stroke-width: 0;
  dominant-baseline: central;
}

.node text tspan .label {
  padding-left: 0.5em;
}

.node text .primary {
    font-weight: bold;
}

.node text .node-name {
  /* font-size: calc(1em / var(--zoom-scale)); */
}

.node text .secondary {
    font-style: italic;
}

.node.selected text .secondary:hover,
.node.selected text .primary:hover {
    text-decoration: dashed underline;
}

.show-key {
    position: fixed;
    right: 100px;
    top: 100px;
    font-size: 2em;
    font-family: consolas;
}

.edge-info {
    filter: url("#flood-background");
    padding: 4px;
    cursor: pointer;
}

.edge-info.selected {
    filter: url("#selected-flood-background");
}

.error.main {
    position: absolute;
    top: 0;
    left: 0;
    width: 25vw;
    color: red;
    padding: 1em;
    height: 8em;
    z-index: 2;
}

.align-selected {
    left: var(--nodex);
    top: var(--nodey);
}

/* popover */
#node-editor-popover {
    position: fixed;
    width: 100vw;
    height: 100vh;
    z-index: 100;
    top: 0;
    left: 0;
    background: #000000EE;
}

.popover {
    position: absolute;
    z-index: 100;
    background: #000000EE;
}

/* top bar */
.top-bar {
  width: 100vw;
  top: 1em;
  position: absolute;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap-reverse;
  justify-content: space-between;
}

/* error window */
#node-editor-error {
  flex-grow: 1;
}

#node-editor-error pre {
  display: flex;
  flex-direction: row;
  gap: .5em;
  white-space: pre-wrap;
}

#node-editor-error .goto {
  position: relative;
  text-decoration: underline;
  cursor: pointer;
  z-index: 12;
}

/* actions */

.actions {
    flex-basis: 20em;
    padding-right: 1em;
    cursor: pointer;
    display: flex;
    gap: 1em;
    z-index: 12;
    flex-direction: row;
    flex-wrap: wrap;
}

#graph-actions .graph-action {
    font-size: 2em;
    height: fit-content;
    user-select: none;
}

.actions .right-padding {
  flex-basis: 2em;
  flex-shrink: 1;
}

.action {
  display: flex;
  cursor: pointer;
  flex-direction: row;
  gap: .4em;
  align-items: center;
}

.action span {
  text-decoration: underline dotted;
}

.action span.material-symbols-outlined {
  text-decoration: none;
  font-size: 1em;
}

a, a:visited {
  color: white;
}

.overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  z-index: 128;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#help-window {
  position: fixed;
  background: #000000EE;
  padding: 2em;
  width: 50vw;
  box-sizing: border-box;
}

@media (max-width: 600px) {
    #help-window {
      width: 100vw;
    }
}