/* TextArea — multi-line text input. Skin layered over `<textarea>`. */

[data-textarea] {
	--_textarea-px: var(--space-3);
	--_textarea-py: var(--space-2);
	--_textarea-gap: var(--space-2);
	--_textarea-font-size: var(--font-size-md);
	--_textarea-line-height: var(--leading-normal);
	--_textarea-radius: var(--radius-md);
	--_textarea-border: var(--color-neutral-border);
	/* `--color-{role}-border-strong` is NOT part of this theme's token vocabulary
	   (only `--color-{role}-border` exists). Consume the SAME tokens the other inputs
	   use: the Field hovers to `--color-border-strong` and focuses to
	   `--color-focus-ring`. Per-color focus accents below use each role's `-solid`. */
	--_textarea-border-hover: var(--color-border-strong);
	--_textarea-border-focus: var(--color-focus-ring);
	--_textarea-bg: var(--color-surface);
	--_textarea-color: var(--color-content);
	--_textarea-placeholder: var(--color-content-muted);
	--_textarea-count-color: var(--color-content-muted);
	--_textarea-count-overflow: var(--color-threat-text);

	display: inline-flex;
	flex-direction: column;
	gap: var(--_textarea-gap);
	inline-size: 100%;
	min-inline-size: 0;
}

[data-textarea][data-size='xs'] {
	--_textarea-px: var(--space-2);
	--_textarea-py: var(--space-1);
	--_textarea-font-size: var(--font-size-xs);
	--_textarea-radius: var(--radius-sm);
}
[data-textarea][data-size='sm'] {
	--_textarea-px: var(--space-2);
	--_textarea-py: var(--space-1-5);
	--_textarea-font-size: var(--font-size-sm);
}
[data-textarea][data-size='lg'] {
	--_textarea-px: var(--space-4);
	--_textarea-py: var(--space-3);
	--_textarea-font-size: var(--font-size-lg);
	--_textarea-radius: var(--radius-lg);
}
[data-textarea][data-size='xl'] {
	--_textarea-px: var(--space-5);
	--_textarea-py: var(--space-4);
	--_textarea-font-size: var(--font-size-xl);
	--_textarea-radius: var(--radius-lg);
}

/* Color accents — applied on focus + when invalid. Each role's `-solid` (the
   saturated accent, step 9) is the existing token closest to the intended strong
   focus border. */
[data-textarea][data-color='secondary'] {
	--_textarea-border-focus: var(--color-secondary-solid);
}
[data-textarea][data-color='neutral'] {
	--_textarea-border-focus: var(--color-neutral-solid);
}
[data-textarea][data-color='affirm'] {
	--_textarea-border-focus: var(--color-affirm-solid);
}
[data-textarea][data-color='fulfill'] {
	--_textarea-border-focus: var(--color-fulfill-solid);
}
[data-textarea][data-color='risk'] {
	--_textarea-border-focus: var(--color-risk-solid);
}
[data-textarea][data-color='threat'] {
	--_textarea-border-focus: var(--color-threat-solid);
}
[data-textarea][data-color='loss'] {
	--_textarea-border-focus: var(--color-loss-solid);
}

/* The real input. */
[data-textarea-input] {
	display: block;
	inline-size: 100%;
	min-inline-size: 0;
	padding-block: var(--_textarea-py);
	padding-inline: var(--_textarea-px);
	border: var(--border-width) solid var(--_textarea-border);
	border-radius: var(--_textarea-radius);
	background: var(--_textarea-bg);
	color: var(--_textarea-color);
	font-family: var(--font-family-body);
	font-size: var(--_textarea-font-size);
	line-height: var(--_textarea-line-height);
	outline: none;
	transition:
		border-color var(--duration-fast) var(--ease-default),
		box-shadow var(--duration-fast) var(--ease-default);
}

[data-textarea-input]:hover:not([data-disabled]):not([data-readonly]) {
	border-color: var(--_textarea-border-hover);
}

[data-textarea][data-focused] [data-textarea-input] {
	border-color: var(--_textarea-border-focus);
	box-shadow: 0 0 0 var(--ring-width, 2px)
		color-mix(in srgb, var(--_textarea-border-focus) 25%, transparent);
}

[data-textarea-input][data-invalid] {
	border-color: var(--color-threat-solid);
}

[data-textarea][data-variant='outline'] [data-textarea-input] {
	background: transparent;
}

[data-textarea][data-variant='ghost'] [data-textarea-input] {
	background: transparent;
	border-color: transparent;
}
[data-textarea][data-variant='ghost'][data-focused] [data-textarea-input] {
	border-color: var(--_textarea-border-focus);
}

[data-textarea-input][data-disabled] {
	cursor: not-allowed;
	opacity: var(--opacity-disabled, 0.6);
}

[data-textarea-input]::placeholder {
	color: var(--_textarea-placeholder);
}

/* Count chip — eidos default render: `count / max`. */
[data-textarea-count] {
	display: inline-flex;
	align-items: baseline;
	gap: 0.25em;
	align-self: flex-end;
	color: var(--_textarea-count-color);
	font-family: var(--font-family-mono, ui-monospace, monospace);
	font-size: calc(var(--_textarea-font-size) * 0.85);
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

[data-textarea-count][data-overflow] {
	color: var(--_textarea-count-overflow);
	font-weight: 600;
}

[data-textarea-count-sep] {
	opacity: 0.5;
}

@media (prefers-reduced-motion: reduce) {
	[data-textarea-input] {
		transition: none;
	}
}