input.wp-block-search__input,
input[type='text'],
input[type='email'],
input[type='url'],
input[type='password'],
input[type='search'],
input[type='number'],
input[type='tel'],
input[type='range'],
input[type='date'],
input[type='month'],
input[type='week'],
input[type='time'],
input[type='datetime'],
input[type='datetime-local'],
input[type='color'],
textarea,
select {
	-webkit-appearance: none;
	padding: var(--wp--custom--form--spacing--padding);
	width: 100%;
	background-color: var(--wp--custom--form--color--background);
	border: var(--wp--custom--form--border--style) var(--wp--custom--form--border--width) var(--wp--custom--form--border--color);
	transition: all 0.15s ease-in-out;
	border-radius: var(--wp--custom--form--border--radius);

	&:focus {
		outline: none;
		border-color: var(--wp--preset--color--primary);
	}
}

select {
	background: var(--wp--custom--form--color--background)
		url("data:image/svg+xml;utf8,<svg viewBox='0 0 140 140' width='16' height='16' xmlns='http://www.w3.org/2000/svg'><g><path d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z' fill='black'/></g></svg>")
		no-repeat;
	background-position: right 0.8rem top 50%;
	background-repeat: no-repeat;
}

button,
[type='button'],
[type='reset'],
[type='submit'] {
	border: none !important;
	font-family: var(--wp--custom--button--typography--font-family);
	font-size: var(--wp--custom--button--typography--font-size);
	line-height: var(--wp--custom--button--typography--line-height);
	font-weight: var(--wp--custom--button--typography--font-weight);
	color: #ffffff;
	display: inline-block;
	border-radius: var(--wp--custom--button--border--radius);
	border: var(--wp--custom--button--border--style) var(--wp--custom--button--border--width) var(--wp--custom--button--border--color);
	padding: var(--wp--custom--button--spacing--padding--top) var(--wp--custom--button--spacing--padding--right) var(--wp--custom--button--spacing--padding--bottom) var(--wp--custom--button--spacing--padding--left);
	font-size: var(--wp--preset--font-size--normal);
	background: var(--wp--preset--color--primary);
}

[type='radio'] {
	-webkit-appearance: none;
	position: relative;
	border: var(--wp--custom--form--border--style) var(--wp--custom--form--border--width) var(--wp--custom--form--border--color);
	background-color: var(--wp--custom--form--color--background);
	height: 1.5rem;
	width: 1.5rem;
	border-radius: 100%;
	outline: 0;
	vertical-align: middle;
	transform: translateY(-0.15rem);

	&:focus {
		outline: none;
		border-color: var(--wp--preset--color--primary);
	}

	&:checked:before {
		position: absolute;
		line-height: 0;
		top: 55%;
		left: 30%;
		content: '\2022';
		color: var(--unison--preset--primary-body-color);
	}
}

[type='checkbox'] {
	-webkit-appearance: none;
	border: var(--wp--custom--form--border--style) var(--wp--custom--form--border--width) var(--wp--custom--form--border--color);
	border-radius: var(--wp--custom--form--border--radius);
	background-color: var(--wp--custom--form--color--background);
	height: 1.5rem;
	width: 1.5rem;
	outline: 0;
	vertical-align: middle;
	transform: translateY(-0.15rem);

	&:focus {
		outline: none;
		border-color: var(--wp--preset--color--primary);
	}

	&:checked {
		background: var(--wp--custom--form--color--background)
			url('data:image/svg+xml;utf8,<svg enable-background="new 0 0 100 100" viewBox="0 0 100 125" xmlns="http://www.w3.org/2000/svg"><path d="m26 26h48v48h-48z" fill="none"/><path d="m33.3 71.3-22.3-22.3-7.6 7.5 29.9 29.9 64.1-64.1-7.5-7.5z"/></svg>')
			no-repeat;
		background-size: 1rem;
		background-position: top 0.1rem left 50%;
	}
}
