@use "../abstracts/variables";

form {
	accent-color: var(--color-primary);
}

abbr[title] {
	text-decoration: none;
}

label:where(:not([class*="gfield"]):not([class*="gform"]):not([class*="wpform"])) {
	display: inline-block;
	margin: var(--label-margin, 0 0 var(--spacing-xs));
	font-weight: var(--label-font-weight, var(--heading-font-weight));
	font-size: var(--label-font-size, inherit);

	--input-font-size: smaller;
	--input-font-weight: var(--body-font-weight);
}

#{variables.$all-text-inputs} {
	display: var(--input-display, block);
	width: var(--input-width, 100%);
	margin: var(--input-margin, 0);
	padding: var(--input-padding, 0.9em); // Matches button vertical spacing.
	color: var(--input-color, var(--color-body));
	font-size: var(--input-font-size, var(--font-size-base));
	font-family: var(--input-font-family, var(--inherit));
	line-height: var(--input-line-height, 1);
	background-color: var(--input-background-color, var(--color-white));
	background-clip: padding-box; // Remove iOS box shadow.
	border: var(--input-border, 1px solid rgba(0, 0, 0, 0.1));
	border-radius: var(--input-border-radius, var(--border-radius));
	outline: none;
	box-shadow: var(--input-box-shadow, none);
	transition: var(--input-transition, var(--transition));

	&:focus {
		border-color: var(--input-border-color-focus, var(--color-link));
		outline: none;
	}

	&:disabled {
		cursor: not-allowed;
		opacity: 0.5;
	}
}

::placeholder,
input::placeholder {
	color: var(--input-placeholder-color, currentColor);
	font-size: var(--input-placeholder-font-size, var(--font-size-base));
	opacity: var(--input-placeholder-opacity, 0.5); // Firefox requires opacity to stay consistent.
}

textarea {
	--input-line-height: var(--body-line-height, var(--line-height-lg));
	--input-border-radius: var(--border-radius);
}

select {
	min-height: var(--select-height, calc(var(--font-size-md, 1em) * 2));
	accent-color: currentColor;
	--input-padding: var(--select-padding, 0 var(--spacing-sm));

	&[multiple] {
		height: auto;
	}
}

input[type="checkbox"],
input[type="image"],
input[type="radio"] {
	width: auto;
	margin-right: var(--spacing-md);
}

input[type="color"] {
	min-height: var(--spacing-xl);
}

input[type="search"] {
	width: var(--search-input-width, auto);
	min-width: var(--search-input-min-width, 0);
	max-width: var(--search-input-max-width, 320px);
	font-size: var(--font-size-md);
	-webkit-appearance: none;

	&::-webkit-search-cancel-button,
	&::-webkit-search-results-button {
		display: none;
	}
}

fieldset {
	--list-style-type: none; // Found lists in some fieldsets, first in WP Forms modern markup feature.
	min-width: 0;
	margin: 0 0 var(--spacing-md);
	padding: 0.01em 0 0 0;
	border: 0;

	body:not(:-moz-handler-blocked) & {
		display: table-cell;
	}
}

legend:where(:not([class*="gfield"]):not([class*="gform"]):not([class*="wpform"])) {
	display: table;
	float: left;
	width: 100%;
	margin: var(--legend-margin, 0 0 var(--spacing-md));
	padding: var(--legend-padding, 0);
	font-size: var(--legend-font-size, var(--font-size-md));

	+ * {
		clear: both;
	}
}