.input,
.inputWithLabel {
  width: 100%;
  height: var(--node-editor-inspector-control-height);
  font: var(--node-editor-input-font);
  line-height: 1;
  color: var(--node-editor-text-color);
  background: var(--node-editor-control-background);
  border-radius: var(--node-editor-control-border-radius);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background-color 0.15s ease;
  outline: none;
  box-sizing: border-box;
}

/* Input with label - container styles */
.inputWithLabel {
  display: flex;
  align-items: center;
  gap: var(--node-editor-inspector-space-xs);
}

.inputLabel {
  color: var(--node-editor-secondary-label-color);
  font-size: var(--node-editor-inspector-font-size-meta);
  line-height: var(--node-editor-inspector-line-height-meta);
  font-weight: 500;
}

.inputElement {
  width: 100%;
  min-width: 0;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  font: var(--node-editor-input-font);
  color: var(--node-editor-text-color);
  text-align: right;
  outline: none;
  box-shadow: none;
}

.inputElement::-webkit-outer-spin-button,
.inputElement::-webkit-inner-spin-button {
  margin: 0;
}

.input:focus,
.inputWithLabel:focus-within {
  border-color: var(--node-editor-accent-color);
  box-shadow: 0 0 0 3px var(--node-editor-keyboard-focus-indicator-color);
}

.input:disabled,
.inputWithLabel:has(.inputElement:disabled) {
  background-color: var(--node-editor-card-disabled-background);
  color: var(--node-editor-disabled-control-text-color);
  cursor: not-allowed;
}

/* Variants */
.input[data-variant="default"],
.inputWithLabel[data-variant="default"] {
  padding: 0 var(--node-editor-inspector-space-sm);
  border: var(--node-editor-input-border);
  box-shadow: var(--node-editor-input-box-shadow);
}

.input[data-variant="default"]:hover:not(:disabled),
.inputWithLabel[data-variant="default"]:hover:not(:has(.inputElement:disabled)) {
  border-color: var(--node-editor-separator-color);
}

.input[data-variant="default"]:focus,
.inputWithLabel[data-variant="default"]:focus-within {
  border-color: var(--node-editor-accent-color);
}

.input[data-variant="outline"],
.inputWithLabel[data-variant="outline"] {
  padding: 0 var(--node-editor-inspector-space-sm);
  border: var(--node-editor-card-border);
  background-color: transparent;
}

.input[data-variant="outline"]:hover:not(:disabled),
.inputWithLabel[data-variant="outline"]:hover:not(:has(.inputElement:disabled)) {
  border-color: var(--node-editor-card-hover-border-color);
}

.input[data-variant="outline"]:focus,
.inputWithLabel[data-variant="outline"]:focus-within {
  border-color: var(--node-editor-accent-color);
}

.input[data-variant="filled"],
.inputWithLabel[data-variant="filled"] {
  padding: 0 var(--node-editor-inspector-space-sm);
  border: 1px solid transparent;
  background-color: var(--node-editor-card-filled-background);
}

.input[data-variant="filled"]:hover:not(:disabled),
.inputWithLabel[data-variant="filled"]:hover:not(:has(.inputElement:disabled)) {
  background-color: var(--node-editor-card-filled-hover-background);
}

.input[data-variant="filled"]:focus,
.inputWithLabel[data-variant="filled"]:focus-within {
  background-color: var(--node-editor-control-background);
  border-color: var(--node-editor-accent-color);
}

/* Error state */
.input[data-error="true"],
.inputWithLabel[data-error="true"] {
  border-color: var(--node-editor-caution-color);
}

.input[data-error="true"]:focus,
.inputWithLabel[data-error="true"]:focus-within {
  border-color: var(--node-editor-caution-color);
  box-shadow: 0 0 0 3px var(--node-editor-keyboard-focus-indicator-color);
}