@utility input {
	cursor: text;
	border: var(--border) solid #0000;
	@apply bg-base-100 relative flex shrink appearance-none items-center gap-2 px-3 align-middle whitespace-nowrap;
	width: clamp(3rem, 100%, 100%);
	height: var(--size);
	font-size: max(var(--font-size, 0.875rem), 0.875rem);
	touch-action: manipulation;
	border-start-start-radius: var(--join-ss, var(--radius-field));
	border-start-end-radius: var(--join-se, var(--radius-field));
	border-end-start-radius: var(--join-es, var(--radius-field));
	border-end-end-radius: var(--join-ee, var(--radius-field));
	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;
	--size: calc(var(--size-field, 0.25rem) * 10);
	--input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000);
	&:where(input) {
		@apply inline-flex;
	}
	:where(input) {
		@apply inline-flex h-full w-full appearance-none bg-transparent;
		border: none;

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

	:where(input[type="url"]),
	:where(input[type="email"]) {
		direction: ltr;
	}

	:where(input[type="date"]) {
		@apply inline-flex;
	}

	&: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(> input[disabled]),
	&:is(:disabled, [disabled]),
	fieldset:disabled & {
		@apply border-base-200 bg-base-200 text-base-content/40 placeholder-base-content/20 cursor-not-allowed;
		box-shadow: none;
	}

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

	&::-webkit-date-and-time-value {
		text-align: inherit;
	}

	&[type="number"] {
		&::-webkit-inner-spin-button {
			@apply -my-3 -me-3;
		}
	}

	&::-webkit-calendar-picker-indicator {
		position: absolute;
		inset-inline-end: 0.75em;
	}

	&:has(> input[type="date"]) {
		:where(input[type="date"]) {
			@apply inline-flex;
			-webkit-appearance: none;
			appearance: none;
		}

		input[type="date"]::-webkit-calendar-picker-indicator {
			position: absolute;
			inset-inline-end: 0.75em;
			width: 1em;
			height: 1em;
			cursor: pointer;
		}
	}
}

@utility input-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 input-neutral {
	&,
	&:focus,
	&:focus-within {
		--input-color: var(--color-neutral);
	}
}

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

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

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

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

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

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

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

@utility input-xs {
	--size: calc(var(--size-field, 0.25rem) * 6);
	font-size: max(var(--font-size, 0.75rem), 0.6875rem);

	&[type="number"] {
		&::-webkit-inner-spin-button {
			@apply -my-1 -me-3;
		}
	}
}

@utility input-sm {
	--size: calc(var(--size-field, 0.25rem) * 8);
	font-size: max(var(--font-size, 0.75rem), 0.75rem);

	&[type="number"] {
		&::-webkit-inner-spin-button {
			@apply -my-2 -me-3;
		}
	}
}

@utility input-md {
	--size: calc(var(--size-field, 0.25rem) * 10);
	font-size: max(var(--font-size, 0.875rem), 0.875rem);

	&[type="number"] {
		&::-webkit-inner-spin-button {
			@apply -my-3 -me-3;
		}
	}
}

@utility input-lg {
	--size: calc(var(--size-field, 0.25rem) * 12);
	font-size: max(var(--font-size, 1.125rem), 1.125rem);

	&[type="number"] {
		&::-webkit-inner-spin-button {
			@apply -my-3 -me-3;
		}
	}
}

@utility input-xl {
	--size: calc(var(--size-field, 0.25rem) * 14);
	font-size: max(var(--font-size, 1.375rem), 1.375rem);

	&[type="number"] {
		&::-webkit-inner-spin-button {
			@apply -my-4 -me-3;
		}
	}
}