@utility textarea {
	border: var(--border) solid #0000;
	@apply bg-base-100 rounded-field min-h-20 shrink appearance-none py-2 align-middle;
	width: clamp(3rem, 20rem, 100%);
	padding-inline-start: 0.75rem;
	padding-inline-end: 0.75rem;
	font-size: max(var(--font-size, 0.875rem), 0.875rem);
	touch-action: manipulation;
	border-color: var(--input-color);
	box-shadow:
		0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset,
		0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset;
	--input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000);
	textarea {
		@apply appearance-none bg-transparent;
		border: none;

		&:focus,
		&:focus-within {
			@apply outline-hidden;
		}
	}

	&:focus,
	&:focus-within {
		--input-color: var(--color-base-content);
		box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000);
		outline: 2px solid var(--input-color);
		outline-offset: 2px;
		isolation: isolate;
	}

	/* increase font size in iOS so the page won't zoom */
	@media (pointer: coarse) {
		@supports (-webkit-touch-callout: none) {
			&:focus,
			&:focus-within {
				--font-size: 1rem;
			}
		}
	}

	&:has(> textarea[disabled]),
	&:is(:disabled, [disabled]) {
		@apply border-base-200 bg-base-200 placeholder-base-content text-base-content/40 placeholder-base-content/20 cursor-not-allowed;
		box-shadow: none;
	}

	&:has(> textarea[disabled]) > textarea[disabled] {
		@apply cursor-not-allowed;
	}
}

@utility textarea-ghost {
	@apply bg-transparent;
	box-shadow: none;
	border-color: #0000;

	&:focus,
	&:focus-within {
		@apply text-base-content bg-base-100;
		border-color: #0000;
		box-shadow: none;
	}
}

@utility textarea-neutral {
	&,
	&:focus,
	&:focus-within {
		--input-color: var(--color-neutral);
	}
}

@utility textarea-primary {
	&,
	&:focus,
	&:focus-within {
		--input-color: var(--color-primary);
	}
}

@utility textarea-secondary {
	&,
	&:focus,
	&:focus-within {
		--input-color: var(--color-secondary);
	}
}

@utility textarea-accent {
	&,
	&:focus,
	&:focus-within {
		--input-color: var(--color-accent);
	}
}

@utility textarea-info {
	&,
	&:focus,
	&:focus-within {
		--input-color: var(--color-info);
	}
}

@utility textarea-success {
	&,
	&:focus,
	&:focus-within {
		--input-color: var(--color-success);
	}
}

@utility textarea-warning {
	&,
	&:focus,
	&:focus-within {
		--input-color: var(--color-warning);
	}
}

@utility textarea-error {
	&,
	&:focus,
	&:focus-within {
		--input-color: var(--color-error);
	}
}
@utility textarea-notice {
	&,
	&:focus,
	&:focus-within {
		--input-color: var(--color-notice);
	}
}
@utility textarea-alert {
	&,
	&:focus,
	&:focus-within {
		--input-color: var(--color-alert-color);
	}
}

@utility textarea-xs {
	font-size: max(var(--font-size, 0.6875rem), 0.6875rem);
}

@utility textarea-sm {
	font-size: max(var(--font-size, 0.75rem), 0.75rem);
}

@utility textarea-md {
	font-size: max(var(--font-size, 0.875rem), 0.875rem);
}

@utility textarea-lg {
	font-size: max(var(--font-size, 1.125rem), 1.125rem);
}

@utility textarea-xl {
	font-size: max(var(--font-size, 1.375rem), 1.375rem);
}