/*-------------------------------------------------------
Forms
-------------------------------------------------------*/

::placeholder {
	color: var(--wp--preset--color--contrast-3);
}

::-moz-placeholder {
	opacity: 1;
}

/*
Form
*/

form {

	> * {
		margin-block-start: var(--wp--style--block-gap);
		margin-block-end: 0;
	}

	> :first-child {
		margin-block-start: 0;
	}
}

/*
Label
*/

label,
.wp-block-search__label {
	display: inline-block;
	margin-bottom: 0.25rem;

	color: var(--wp--preset--color--contrast-3);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 450;
	letter-spacing: 0;
}

/*
Inputs
*/

:not(.wp-block-more) > input:not([type="checkbox"]):not([type="submit"]),
textarea,
select {
	appearance: none;

	color: var(--wp--preset--color--contrast-2);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--normal);
	font-weight: 400;
	line-height: var(--wp--custom--typography--line-height--normal, inherit);
	letter-spacing: var(--wp--custom--typography--letter-spacing--normal, inherit);

	font-variation-settings: var(--wp--custom--typography--font-variation-settings, normal);
	font-feature-settings: var(--wp--custom--typography--font-feature-settings, normal);

	background-color: var(--wp--custom--color--input--background, var(--wp--preset--color--base));
	border-width: 1px;
	border-style: solid;
	border-color: var(--wp--custom--color--input--border, var(--wp--preset--color--contrast-4));
	border-radius: var(--wp--custom--border--radius);
	box-shadow: inset 0 1px 3px 0 var(--wp--preset--color--contrast-5);

	transition: all 0.25s ease-in-out;

	&:hover {
		border-color: var(--wp--custom--color--input--hover--border, var(--wp--preset--color--contrast-4));
	}

	&:focus {
		border-color: var(--wp--custom--color--input--focus--border, color-mix(in srgb, var(--wp--preset--color--contrast-4) 85%, var(--wp--preset--color--contrast)));
		outline: none;
	}
}

:not(.wp-block-more) > input:not([type="checkbox"]):not([type="submit"]),
textarea {
	display: block;
	width: 100%;
	max-width: 100%;
	min-height: 2.75rem;
	padding: 0.5625rem 1rem;
}

select {
	height: 2.75rem;
	max-width: 100%;
	padding: 0 2.5rem 0 1rem;

	background-image:
		linear-gradient(45deg, transparent 50%, var(--wp--preset--color--contrast) 50%),
		linear-gradient(135deg, var(--wp--preset--color--contrast) 50%, transparent 50%);

	background-position:
		calc(100% - 19.5px) 51%,
		calc(100% - 15px) 51%;

	background-size:
		4.5px 4.5px,
		4.5px 4.5px;

	background-repeat: no-repeat;
}


textarea {
	resize: vertical;
	padding-top: 1rem;
	padding-bottom: 1rem;
}

/*
Radio, checkbox
*/

input[type="radio"],
input[type="checkbox"] {
	position: relative;

	+ label {
		margin-bottom: 0;
		margin-left: 0.375rem;

		font-size: var(--wp--preset--font-size--small);
		font-weight: 450;
		line-height: var(--wp--custom--typography--line-height--small);
		letter-spacing: 0;
	}
}
