//
// Forms
//

input,
select,
textarea,
.e-input-style {
	color: var(--e-a-color-txt);
	border-radius: var(--e-a-border-radius);
	font-size: 12px;
	width: 100%;
	background: none;
	background-color: var(--e-a-bg-default);
	box-shadow: none;
	border: var(--e-a-border-bold);
	outline: none;

	&:focus {

		&, + .elementor-control-dynamic-switcher {
			border-color: var(--e-a-border-color-focus);
		}
	}
}

.elementor-error {

	input,
	select,
	textarea {
		border-color: var(--e-a-color-danger);
	}
}

input {
	// This fixes an issue in Firefox, in cases where a container with `display: flex` has a defined width,
	// an input element inside this container cannot be given its own defined width.
	min-width: 0;
}

input, textarea, .e-input-style {
	padding: 5px;
}

textarea, .e-input-style {
	resize: vertical;
}

input[type="checkbox"],
input[type="radio"] {
	height: auto;
	width: auto;
}

input[type="checkbox"] {
	margin: 0;
	padding: 0;
	appearance: none;
	outline: none;
	content: none;
	height: 15px;
	border-radius: var(--e-a-border-radius);
	margin-inline-end: 5px;
	width: 15px;
	border: var(--e-a-border-bold);
	display: inline-flex;
	align-items: center;
	justify-content: center;

	&:checked  {
		background: var(--e-a-color-primary-bold);
		border: none;

		&:before  {
			display: block;
			content: "";
			width: 4px;
			height: 7px;
			border: solid white;
			border-width: 0 2px 2px 0;
			transform: rotate(45deg);
		}
	}
}

input[disabled] {
	background-color: var(--e-a-bg-hover);
	cursor: not-allowed;
	opacity: 1;
}

select {
	outline: none;
	height: $control-unit;
}
