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,
.wp-block-search .wp-block-search__input,
.woocommerce .select2-container .select2-selection--single,
.woocommerce-page .select2-container .select2-selection--single {
	color: $color__primary;
	border: 1px solid $color__primary;
	border-radius: 0;
	padding: 12px 16px;
	border-radius: 0;
	min-height: 51px;
	max-width: 100%;

	&:focus {
		color: $color__text-input-focus;
		outline: none;
		box-shadow: 0 0 0 1px;
	}
}

select {
	width: 100%;
	border: 1px solid $color__primary;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23212121' viewBox='0 0 448 512'%3E%3Cpath d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z' /%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 98% center;
}

textarea {
	width: 100%;
}

label {
	&.error {
		margin-top: 10px;
		color: #dd3434;
	}
}

.woocommerce .select2-container .select2-selection--single,
.woocommerce-page .select2-container .select2-selection--single {
	height: 100%;

	.select2-selection__arrow {
		top: 15px;
	}
}

.woocommerce-form__label-for-checkbox {
	position: relative;
	input {
		position: absolute;
		opacity: 0;
		cursor: pointer;
		height: 0;
		width: 0;
		&:checked + span:before,
		&:checked + .error + span:before {
			opacity: 1;
		}
		&[required] + .error {
			position: absolute;
			bottom: -30px;
		}
	}
	span:not(.required) {
		position: relative;
		padding-left: 28px;
		line-height: 1.3;
		&:before {
			content: '';
			position: absolute;
			opacity: 0;
			left: 6px;
			top: 4px;
			width: 5px;
			height: 10px;
			border: solid $color__primary;
			border-width: 0 3px 3px 0;
			transform: rotate(45deg);
			transition: ease opacity 200ms;
		}
		&:after {
			content: '';
			position: absolute;
			left: 0;
			top: 1px;
			width: 18px;
			height: 18px;
			border: 1px solid $color__primary;
		}
	}
}