.treeItem {
  display: flex;
  align-items: center;
  height: var(--node-editor-tree-item-height);
  padding: 0;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--node-editor-transition-duration) ease;
  position: relative;
  box-sizing: border-box;
}

.treeItem:not([data-selected="true"]):hover {
  background: color-mix(in srgb, var(--node-editor-selected-control-color) 80%, transparent);
}

.treeItem[data-selected="true"] {
  background: var(--node-editor-selected-control-color);
  color: var(--node-editor-selected-control-text-color);
}

.treeItem[data-selected="true"] .nodeName {
  color: var(--node-editor-selected-control-text-color);
}

.treeItem[data-selected="true"] .nodeIcon {
  filter: brightness(var(--node-editor-icon-selected-brightness));
}

.expandButton {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--node-editor-control-button-size-sm);
  height: var(--node-editor-control-button-size-sm);
  padding: 0;
  margin-right: var(--node-editor-inspector-space-xs);
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--node-editor-secondary-label-color);
  flex-shrink: 0;
  box-sizing: border-box;
}

.expandButton:hover {
  color: var(--node-editor-label-color);
}

.treeItem[data-selected="true"] .expandButton {
  color: color-mix(in srgb, var(--node-editor-selected-control-text-color) 70%, transparent);
}

.treeItem[data-selected="true"] .expandButton:hover {
  color: var(--node-editor-selected-control-text-color);
}

.nodeIcon {
  font-size: var(--node-editor-icon-size-sm);
  margin-right: var(--node-editor-inspector-space-sm);
  flex-shrink: 0;
  box-sizing: border-box;
}

.nodeName {
  flex: 1;
  font-size: var(--node-editor-inspector-font-size-body);
  line-height: var(--node-editor-inspector-line-height-body);
  color: var(--node-editor-label-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: text;
  user-select: text;
}

.nodeNameInput {
  flex: 1;
  font-size: var(--node-editor-inspector-font-size-body);
  line-height: var(--node-editor-inspector-line-height-body);
  color: var(--node-editor-label-color);
  background: var(--node-editor-control-background);
  border: var(--node-editor-border-width) solid var(--node-editor-accent-color);
  border-radius: var(--node-editor-border-radius-xs);
  padding: 2px var(--node-editor-inspector-space-xs);
  outline: none;
  font-family: inherit;
  box-sizing: border-box;
}

.nodeNameInput:focus {
  border-color: var(--node-editor-accent-color);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--node-editor-accent-color) 20%, transparent);
}

.visibilityButton,
.lockButton,
.deleteButton {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--node-editor-control-button-size);
  height: var(--node-editor-control-button-size);
  padding: 0;
  margin-left: var(--node-editor-inspector-space-xs);
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--node-editor-secondary-label-color);
  opacity: 0;
  transition: opacity var(--node-editor-transition-duration) ease;
  flex-shrink: 0;
  box-sizing: border-box;
}

.deleteButton {
  color: var(--node-editor-caution-color);
}

.treeItem:hover .visibilityButton,
.treeItem:hover .lockButton,
.treeItem:hover .deleteButton {
  opacity: 1;
}

.visibilityButton:hover {
  color: var(--node-editor-label-color);
}

.deleteButton:hover {
  color: var(--node-editor-caution-color);
  background: var(--node-editor-caution-hover-background);
  border-radius: var(--node-editor-border-radius-xs);
  box-sizing: border-box;
}

.treeItem[data-selected="true"] .visibilityButton,
.treeItem[data-selected="true"] .lockButton,
.treeItem[data-selected="true"] .deleteButton {
  color: color-mix(in srgb, var(--node-editor-selected-control-text-color) 70%, transparent);
}

.treeItem[data-selected="true"] .visibilityButton:hover,
.treeItem[data-selected="true"] .lockButton:hover {
  color: var(--node-editor-selected-control-text-color);
}

.treeItem[data-selected="true"] .deleteButton:hover {
  color: var(--node-editor-selected-control-text-color);
  background: color-mix(in srgb, var(--node-editor-selected-control-text-color) 15%, transparent);
  box-sizing: border-box;
}

/* Indentation for nested items */
.treeItem[style*="padding-left: 24px"] {
  border-left: var(--node-editor-border-width) solid var(--node-editor-separator-color);
  margin-left: var(--node-editor-tree-indent);
  box-sizing: border-box;
}

/* Drag and Drop styles */
[data-dragging="true"] {
  opacity: var(--node-editor-dragging-opacity);
  cursor: move;
}

.treeItem[data-drag-over-inside="true"] {
  background: var(--node-editor-selected-control-color);
  color: var(--node-editor-selected-control-text-color);
}

.treeItem[data-drag-over-inside="true"] .nodeName,
.treeItem[data-drag-over-inside="true"] .expandButton,
.treeItem[data-drag-over-inside="true"] .visibilityButton {
  color: var(--node-editor-selected-control-text-color);
}

.treeItem[data-drag-over-position="before"]::before,
.treeItem[data-drag-over-position="after"]::after {
  content: "";
  position: absolute;
  left: var(--node-tree-drop-indicator-left);
  right: 0;
  height: var(--node-editor-drop-indicator-height);
  background: var(--node-editor-accent-color);
  border-radius: var(--node-editor-border-radius-xxs);
  animation: dropIndicatorPulse var(--node-editor-animation-duration) ease-in-out infinite;
  pointer-events: none;
  box-sizing: border-box;
}

.treeItem[data-drag-over-position="before"]::before {
  top: 0;
  transform: translateY(-50%);
}

.treeItem[data-drag-over-position="after"]::after {
  bottom: 0;
  transform: translateY(50%);
}

@keyframes dropIndicatorPulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: var(--node-editor-pulse-min-opacity);
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .treeItem:not([data-selected="true"]):hover {
    background: color-mix(in srgb, var(--node-editor-selected-control-color) 80%, transparent);
  }

  .nodeName {
    color: var(--node-editor-label-color);
  }

  .expandButton {
    color: var(--node-editor-secondary-label-color);
  }

  .expandButton:hover {
    color: var(--node-editor-label-color);
  }

  .visibilityButton,
  .deleteButton {
    color: var(--node-editor-secondary-label-color);
  }

  .visibilityButton:hover {
    color: var(--node-editor-label-color);
  }

  .deleteButton:hover {
    color: var(--node-editor-caution-color);
    background: var(--node-editor-caution-hover-background);
  }

  .treeItem[style*="padding-left: 24px"] {
    border-left-color: var(--node-editor-separator-color);
  }
}