@layer components {
	:where(
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="number"],
	input[type="password"],
	input[type="search"],
	input[type="url"],
	input[type="date"],
	input[type="time"],
	input[type="week"],
	input[type="datetime"],
	input[type="datetime-local"]) {
		padding: .75rem 1rem;
		font-size: 1rem;
		border: 1px solid hsl(45, 2%, 67%);
		border-radius: 3px;
		box-shadow: -2px 2px 6px rgba(0,0,0, .06);
		width: 100%;
	}

	:where(
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="number"],
	input[type="password"],
	input[type="search"],
	input[type="url"],
	input[type="date"],
	input[type="time"],
	input[type="week"],
	input[type="datetime"],
	input[type="datetime-local"]):focus {

	}

	:where(
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="number"],
	input[type="password"],
	input[type="search"],
	input[type="url"],
	input[type="date"],
	input[type="time"],
	input[type="week"],
	input[type="datetime"],
	input[type="datetime-local"]):is([required], [required="true"], [required="required"]):not([required="false"]) {

	}

	.field-validation-error + div :where(
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="number"],
	input[type="password"],
	input[type="search"],
	input[type="url"],
	input[type="date"],
	input[type="time"],
	input[type="week"],
	input[type="datetime"],
	input[type="datetime-local"],
	select,
	textarea){
		border-color: hsl(var(--clr-red));
	}

	select{
		padding: .75rem 1rem;
		font-size: 1rem;
		border: 1px solid hsl(45, 2%, 67%);
		border-radius: 3px;
		box-shadow: -2px 2px 6px rgba(0,0,0, .06);
		width: 100%;
	}

	textarea{
		padding: .75rem 1rem;
		font-size: 1rem;
		border: 1px solid hsl(45, 2%, 67%);
		border-radius: 3px;
		box-shadow: -2px 2px 6px rgba(0,0,0, .06);
		width: 100%;
	}
}