.textarea {
  width: 100%;
  font: var(--node-editor-input-font);
  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;
  min-height: 80px;
  box-sizing: border-box;
}

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

.textarea:disabled {
  background-color: var(--node-editor-card-disabled-background);
  color: var(--node-editor-disabled-control-text-color);
  cursor: not-allowed;
}

/* Variants */
.textarea[data-variant="default"] {
  padding: var(--node-editor-input-padding);
  border: var(--node-editor-input-border);
  box-shadow: var(--node-editor-input-box-shadow);
}

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

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

.textarea[data-variant="outline"] {
  padding: var(--node-editor-input-padding);
  border: var(--node-editor-card-border);
  background-color: transparent;
}

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

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

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

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

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

/* Resize options */
.textarea[data-resize="none"] {
  resize: none;
}

.textarea[data-resize="vertical"] {
  resize: vertical;
}

.textarea[data-resize="horizontal"] {
  resize: horizontal;
}

.textarea[data-resize="both"] {
  resize: both;
}

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

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