/**
 * Input field.
 */
@utility input {
	display: block;
	width: 100%;
	height: 2rem;
	margin: 0;
	padding: --spacing(4);
	border: 1px solid var(--color-primary);
	border-radius: var(--radius-button);
	font-family: var(--font-body);
	font-size: var(--text-base);
	color: var(--color-text);
	background-color: var(--color-background);
	box-shadow: none;

	&:focus-visible {
		outline: var(--border-width-focus) solid var(--color-accent);
		outline-offset: var(--border-width-focus-offset);
		border-radius: var(--radius-button);
	}

	&:disabled {
		opacity: 0.6;
		filter: saturate(60%);
	}
}