/* Shared settings */
/* Set variables to all form controls */
.form_field {
	--input-font-size: var(--font-size-default);
	--input-font-color: var(--color-brown-600);
	--input-font-color-active: var(--color-black-950);
	--input-font-color-placeholder: var(--color-black-200);
	--input-padding-block: calc((var(--input-font-size) * 0.75) - (var(--input-font-size) / var(--font-size-pixel-units))); /* 12px - 1 */
	--input-padding-inline: calc((var(--input-font-size) * 1.25) - (var(--input-font-size) / var(--font-size-pixel-units))); /* 20px - 1 */
	--input-border-radius: var(--border-radius-s);
	--input-border-width: 2px;
	--input-border-color: var(--form-row-color-accent, var(--color-brown-200)); /* If a form_row is controlling the colour, then use that value rather than the fallback */
	--input-background-color: var(--color-white);
	--input-size-min-block: calc(var(--font-size-default) * 1.25);
	--input-size-min-inline: calc(var(--font-size-default) * 1.25);
	--input-box-shadow: var(--elevation-none);
}

.form_field > *:is(
	input,
	select,
	textarea
):not(:is(
	[type="file"]
)) {
	display: inline-block;
	box-sizing: border-box;
	vertical-align: middle;
	font-family: inherit;
	border-width: var(--input-border-width);
	border-color: var(--input-border-color);
	border-style: solid;
	box-shadow: var(--input-box-shadow);
	border-radius: var(--input-border-radius);
	transition-property: border-radius, box-shadow, border-color, background-color;
	transition-duration: var(--speed-blink);
}

/* Give native controls color theming using accent color */
[type="checkbox"],
[type="radio"],
select {
	accent-color: var(--input-font-color);
}

/* Checkboxes and Radios */
[type="checkbox"],
[type="radio"] {
	border-width: var(--input-border-width);
	border-color: var(--input-border-color);
	border-style: solid;
	margin: 0;
	block-size: calc(var(--input-font-size) * 1.5);
	inline-size: calc(var(--input-font-size) * 1.5);
}

/* Checkboxes */
[type="checkbox"] {
	border-radius: var(--border-radius-s);
}

/* Radio buttons */
[type="radio"] {
	border-radius: 100%;
}

/* Checkbox and radio groups */
.form_field > ul {
	list-style-type: '';
	margin: 0;
	padding: 0;
}

.form_field li + li {
	margin-block-start: 0.5rem;
}

.form_field li label {
	display: block;
}

.form_field li label input {
	clip: rect(0 0 0 0); 
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap; 
	width: 1px;
}

.form_field li span {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	gap: 0.5rem;
	color: var(--color-surface-default);
	font-size: 0.875rem;
}

.form_field li input ~ span::before {
	content: "";
	border-width: var(--input-border-width);
	border-color: var(--input-border-color);
	border-style: solid;
	display: block;
	inline-size: 2rem;
	block-size: 2rem;
	box-sizing: border-box;
	box-shadow: var(--input-box-shadow);
}

.form_field li [type="checkbox"] ~ span::before {
	border-radius: var(--input-border-radius);
}

.form_field li [type="radio"] ~ span::before {
	border-radius: var(--border-radius-full);
	padding: 0.5rem;
}

.form_field li [type="checkbox"]:checked ~ span::before {
	background-image: url(../../img/sprite_css.svg#icon_tick_brown-600);
	background-size: 18px 14px;
	background-position: 50% 50%;
	background-repeat: no-repeat;
}

.form_field li [type="radio"]:checked ~ span::before {
	background-color: var(--color-brown-600);
	background-clip: content-box;
}

.form_field li label:hover span::before,
.form_field > *:not(ul):hover {
	--input-box-shadow: var(--elevation-s);
	--input-background-color: var(--color-surface-lighter);
}

.form_field li input:focus ~ span::before,
.form_field > *:not(ul):focus {
	--input-box-shadow: var(--elevation-s);
	--input-border-color: var(--color-border-lighter);
	--input-background-color: var(--color-white);
	
	color: var(--input-font-color-active);
	outline: none;
}

/* Search inputs */
[type="search"]::-webkit-search-cancel-button {
	display: none;
}

/* File inputs */
[type="file"]:is(
	:focus,
	:hover
) {
	box-shadow: var(--elevation-none);
	outline: none;
}

/* Text input */
[type="date"],
[type="email"],
[type="number"],
[type="password"],
[type="search"],
[type="tel"],
[type="text"],
[type="url"],
textarea,
select {
	appearance: none;
	min-block-size: var(--input-size-min-block);
	min-inline-size: var(--input-size-min-inline);
	padding-block: var(--input-padding-block);
	padding-inline: var(--input-padding-inline);
	border-width: 1px;
	border-color: var(--input-border-color);
	border-style: solid;
	font-size: var(--input-font-size);
	line-height: 1.25;
	background-color: var(--input-background-color);
	color: var(--input-font-color);
	border-radius: var(--input-border-radius);
}

:is(
	[type="email"],
	[type="number"],
	[type="password"],
	[type="search"],
	[type="tel"],
	[type="text"],
	[type="url"],
	textarea
):only-child {
	inline-size: 100%;
}

::placeholder {
	color: var(--input-font-color-placeholder);
}

/* File inputs */
[type="file"] {
	font-size: 1rem;
}
::-webkit-file-upload-button {

}

/* Date inputs */
::-webkit-datetime-edit {
	line-height: 1;
}

select {
	--select-icon-dropdown-width: 1rem;
	--select-icon-gap: 0.5rem;

	padding-inline-end: calc(var(--input-padding-inline) + var(--select-icon-dropdown-width) + var(--select-icon-gap));
	background-image: url('../../img/sprite_css.svg#icon_arrow_down_brown-600');
	background-position: top 50% right var(--input-padding-inline);
	background-size: var(--select-icon-dropdown-width) var(--select-icon-dropdown-width);
	background-repeat: no-repeat;
}

textarea {
	min-block-size: 2.75rem;
	min-inline-size: 375px;
	max-inline-size: 100%;
}

/* Icon adornment */
input[data-mode="icon-before"],
input[data-mode="icon-after"] {
	--input-internal-gap: 0.5rem;
	--input-icon-size: 1.5rem;

	background-image: var(--icon-image-url);
	background-repeat: no-repeat;
	background-size: var(--input-icon-size) var(--input-icon-size);
}

input[data-mode="icon-before"] {
	background-position: top 50% left var(--input-padding-inline);
	padding-inline-start: calc(var(--input-padding-inline) + var(--input-icon-size) + var(--input-internal-gap));
}

input[data-mode="icon-after"] {
	background-position: top 50% right var(--input-padding-inline);
	padding-inline-end: calc(var(--input-padding-inline) + var(--input-icon-size) + var(--input-internal-gap));
}