:root {
  --node-border: #bcbfc3;
  --node-background-label: #e4e4e4;
  --node-background-input: #ffffff;
  --node-background-hover: #e7e7e7;
  --node-text: #000000;
  --node-text-dimmed: #2c2c2c;
  --node-selected: #f0e65e;
  --node-selected-hover: #faf06c;
  --node-selected-border: #b9a327;
  --node-add: #9bd464;
  --node-add-hover: #a5dd70;
  --node-add-border: #498d09;
  --node-remove: #e76f51;
  --node-remove-hover: #f57656;
  --node-remove-border: #be4b2e;
  --node-indent-border: #b9b9b9;
  --category-predicate: #65b5b8;
  --category-predicate-border: #187e81;
  --category-predicate-background: #95c5c7;
  --category-function: #979fa7;
  --category-function-border: #788086;
  --category-function-background: #dce0e4;
  --category-pool: #76b865;
  --category-pool-border: #398118;
  --category-pool-background: #b1d6a6;
}

:root.dark {
  --node-border: #3f3f3f;
  --node-background-label: #1b1b1b;
  --node-background-input: #272727;
  --node-background-hover: #1f1f1f;
  --node-text: #dadada;
  --node-text-dimmed: #b4b4b4;
  --node-selected: #ad9715;
  --node-selected-hover: #a38c0a;
  --node-selected-border: #8d7a0d;
  --node-add: #487c13;
  --node-add-hover: #3e7409;
  --node-add-border: #3b6e0c;
  --node-remove: #9b341b;
  --node-remove-hover: #922d13;
  --node-remove-border: #7e1d05;
  --node-indent-border: #454749;
  --category-predicate: #306163;
  --category-predicate-border: #224849;
  --category-predicate-background: #1d3333;
  --category-function: #838383;
  --category-function-border: #6b6b6b;
  --category-function-background: #414141;
  --category-pool: #386330;
  --category-pool-border: #2e4922;
  --category-pool-background: #21331d;
}

/* Node headers */

.node-header {
  display: inline-flex;
  position: relative;
  align-items: center;
  width: 100%;
}

.node-header > * {
  height: 34px;
  border: 1px solid;
  color: var(--node-text);
  border-color: var(--node-border);
}

.node-header > label {
  align-self: flex-start;
  padding: 0 9px;
  line-height: 1.94rem;
  white-space: nowrap;
  user-select: none;
  background-color: var(--node-background-label);
}

.node-header > label > .item-display {
  width: 32px;
  height: 32px;
}

.node-header > input {
  font-size: 18px;
  padding-left: 9px;
  background-color: var(--node-background-input);
}

.node-header > input[type="color"] {
  padding: 0 2px;
}

.node-header > textarea {
  min-width: 236.33px;
  min-height: 34px;
  font-size: 18px;
  padding-left: 9px;
  padding-top: 5px;
  background-color: var(--node-background-input);
}

.node-header > select,
.node-header > datalist {
  font-size: 18px;
  padding-left: 6px;
  background-color: var(--node-background-input);
}

.node-header button {
  font-size: 18px;
  padding: 0 9px;
  line-height: 1.94rem;
  white-space: nowrap;
  user-select: none;
  cursor: pointer;
  background-color: var(--node-background-input);
}

.node-header button:not([disabled]):hover {
  background-color: var(--node-background-hover);
}

.node-header a {
  display: flex;
  align-items: center;
  font-size: 18px;
  padding: 0 9px;
  white-space: nowrap;
  user-select: none;
  cursor: pointer;
  fill: var(--node-text);
  background-color: var(--node-background-input);
}

.object-node > .node-header > .node-collapse {
  cursor: pointer;
}

.node-error ~ select:last-child,
.node-error ~ input:last-child,
.node-error ~ input[list]:nth-last-child(2),
.node-error + .fixed-list ~ input {
  border-color: var(--node-remove) !important;
}

/** Rounded corners */

.node-header > .node-icon {
  order: 1;
}

.node-header > *:first-child,
.node-header > .node-icon:first-child + * {
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}

.node-header > *:last-child,
.node-header > input[list]:nth-last-child(2) {
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

.node-header > * {
  margin-right: -1px;
}

.object-node:not(.no-body) > .node-header > *:first-child,
.map-node > .node-header > *:first-child,
.list-node > .node-header > *:first-child {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 0;
}

/* Buttons */

button.selected {
  background-color: var(--node-selected);
  border-color: var(--node-selected-border);
}
button:not([disabled]).selected:hover {
  background-color: var(--node-selected-hover);
}

.node-collapse svg {
  fill: var(--node-text);
}

.node-collapse.closed,
button.add {
  background-color: var(--node-add);
  border-color: var(--node-add-border);
}

.node-collapse:not([disabled]).closed:hover,
button:not([disabled]).add:hover {
  background-color: var(--node-add-hover);
}

.node-collapse.open,
button.remove {
  background-color: var(--node-remove);
  border-color: var(--node-remove-border);
}

.node-collapse:not([disabled]).open:hover,
button:not([disabled]).remove:hover {
  background-color: var(--node-remove-hover);
}

.node-header > button svg {
  fill: var(--node-text);
}

.node-header > button.node-collapse:last-child,
.node-header > button.add:last-child {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

.node-move {
  display: flex;
  flex-direction: column;
  width: 34px;
}

button.move {
  height: 50%;
  border: none;
  display: flex;
}

button.move + button.move {
  border-top: 1px solid var(--node-border);
}

button.move:disabled {
  cursor: unset;
  fill: var(--node-border);
}

.node-icon {
  border: none;
  position: relative;
  display: inline-block;
}

.node-icon .icon-popup {
  visibility: hidden;
  width: 240px;
  background-color: var(--background-6);
  color: var(--text-1);
  text-align: center;
  border-radius: 6px;
  padding: 8px 4px;
  position: absolute;
  z-index: 2;
  top: 125%;
  left: 50%;
  margin-left: -120px;
}

.node-icon .icon-popup::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -3px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent var(--background-6) transparent;
}

.node-icon svg:hover + .icon-popup,
.node-icon.show .icon-popup {
  visibility: visible;
}

.node-icon svg {
  height: 34px;
  width: 34px;
  min-width: 34px;
  margin-left: 6px;
  cursor: pointer;
}

.node-icon.node-help svg {
  fill: var(--node-border);
}

.node-icon.node-error svg {
  fill: var(--node-remove);
}

.node-menu {
  position: absolute;
  left: 0;
  top: 100%;
  width: min-content;
  margin-top: 4px;
  margin-left: 4px;
  z-index: 1;
  color: var(--text-1);
  font-size: 16px;
  border-radius: 6px;
  background-color: var(--background-6);
  box-shadow: 0 1px 5px -2px #000;
}

.node-menu::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-left: 6px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent var(--background-6) transparent;
}

.menu-item {
  padding: 4px;
  display: flex;
  align-items: center;
  white-space: normal;
}

.menu-item > * {
  margin-right: 4px;
}

.menu-item .btn {
  padding: 8px;
  box-shadow: unset;
}

.menu-item span {
  color: var(--text-2);
}

/* Node body and list entry */

.node {
  margin-bottom: 4px;
}

.node-body > .node:first-child {
  margin-top: 4px;
}

.node:last-child {
  margin-bottom: 0;
}

.node-body {
  border-left: 3px solid var(--node-indent-border);
}

.node-body {
  display: flex;
  flex-direction: column;
  padding-left: 18px;
}

.list-node > .node-body > .object-node > .node-body,
.map-node > .node-body > .object-node > .node-body {
  padding-left: 0;
}

.list-node > .node-body > .object-node > .node-body > .node > .node-body,
.map-node > .node-body > .object-node > .node-body > .node > .node-body {
  border-left: none;
}

.list-node > .node-body > .object-node > .node-body > .node > .node-header > .node-icon:first-child + *,
.list-node > .node-body > .object-node > .node-body > .node > .node-header > *:first-child,
.map-node > .node-body > .object-node > .node-body > .node > .node-header > .node-icon:first-child + *,
.map-node > .node-body > .object-node > .node-body > .node > .node-header > *:first-child {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: none;
}

.node-body > .object-node[data-category],
.node-body > .list-node[data-category],
.node-body > .map-node[data-category] {
  width: 100%;
  min-width: max-content;
  padding: 5px;
  padding-left: 0px;
  border: 2px solid var(--node-border);
  border-radius: 3px;
}

.node-body > .object-node[data-category] > .node-header > .node-icon:first-child + *,
.node-body > .object-node[data-category] > .node-header > *:first-child {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: none;
}

.node-body > .object-node[data-category] > .node-body,
.node-body > .list-node[data-category] > .node-body,
.node-body > .map-node[data-category] > .node-body {
  border: none;
}

/* Node type specifics */

.range-node select {
  width: 25px;
}

.fixed-list {
  display: none;
}

.number-node input,
.range-node input,
.fixed-list ~ input {
  width: 100px;
}

/* Color categories */

[data-category=predicate] > .node-header > label,
[data-category=predicate].node-header > label,
[data-category=predicate] > .node-body > .node > .node-header > label {
  background-color: var(--category-predicate);
}

[data-category=predicate] > .node-body,
[data-category=predicate] > .node-header > label,
[data-category=predicate].node-header > label,
[data-category=predicate] > .node-header > *:not(.selected),
[data-category=predicate] > .node-body > .node > .node-header > *:not(.selected) {
  border-color: var(--category-predicate-border);
}

.node-body > .node.object-node[data-category=predicate],
.node-body > .node.list-node[data-category=predicate],
.node-body > .node.map-node[data-category=predicate] {
  background-color: var(--category-predicate-background);
  border-color: var(--category-predicate-border);
}

[data-category=function] > .node-header > label,
[data-category=function].node-header > label,
[data-category=function] > .node-body > .node > .node-header > label {
  background-color: var(--category-function);
}

[data-category=function] > .node-body,
[data-category=function] > .node-header > label,
[data-category=function].node-header > label,
[data-category=function] > .node-header > *:not(.selected),
[data-category=function] > .node-body > .node > .node-header > *:not(.selected) {
  border-color: var(--category-function-border);
}

.node-body > .node.object-node[data-category=function],
.node-body > .node.list-node[data-category=function],
.node-body > .node.map-node[data-category=function] {
  background-color: var(--category-function-background);
  border-color: var(--category-function-border);
}

[data-category=pool] > .node-header > label,
[data-category=pool].node-header > label,
[data-category=pool] > .node-body > .node > .node-header > label {
  background-color: var(--category-pool);
}

[data-category=pool] > .node-body,
[data-category=pool] > .node-header > label,
[data-category=pool].node-header > label,
[data-category=pool] > .node-header > *:not(.selected),
[data-category=pool] > .node-body > .node > .node-header > *:not(.selected) {
  border-color: var(--category-pool-border);
}

.node-body > .node.object-node[data-category=pool],
.node-body > .node.list-node[data-category=pool],
.node-body > .node.map-node[data-category=pool] {
  background-color: var(--category-pool-background);
  border-color: var(--category-pool-border);
}