/* Widgets - Form */
////
/// @group Widgets-Form
/// Widgets - Form

///
.form {
	&.OSFillParent {
		.form-control[class*='ThemeGrid_Width'].not-valid ~ span.validation-message {
			left: 22px;
		}
	}

	label {
		margin-bottom: var(--space-s);
	}

	.dropdown,
	.search-input,
	input[data-input],
	textarea[data-textarea],
	[data-switch] {
		margin-bottom: var(--space-m);
	}

	span {
		position: relative;

		&.validation-message {
			bottom: -32px;
			left: 0;
			position: absolute;
			white-space: nowrap;
			width: 100%;
		}
	}

	& > span.input-text {
		.form-control[class*='ThemeGrid_Width'].not-valid {
			& + span.validation-message {
				left: 0;
			}
		}
	}

	textarea[data-textarea] {
		& + span {
			&.validation-message {
				bottom: 7px;
			}
		}
	}

	.upload-file span.validation-message {
		bottom: 8px;
		position: relative;
	}

	.dropdown-container {
		&[class*='ThemeGrid_Width'].not-valid span.validation-message {
			bottom: 4px;
		}

		&,
		&.dropdown-expanded {
			&.not-valid span.validation-message {
				bottom: -19px;
			}
		}
	}

	.radio-group.not-valid {
		position: relative;

		span.validation-message {
			bottom: -10px;
		}
	}
}

///
.firefox {
	textarea[data-textarea] {
		& + span {
			&.validation-message {
				bottom: 4px;
			}
		}
	}
}

///
span.validation-message {
	color: var(--color-error);
	font-size: var(--font-size-xs);
	margin-left: var(--space-none);
}

///
.form-control[class*='ThemeGrid_Width'].not-valid + span.validation-message {
	left: 10px;
}

// Responsive --------------------------------------------------------------------
.phone {
	.layout-native .form.OSFillParent .form-control[class*='ThemeGrid_Width'].not-valid + span.validation-message {
		left: 6px;
	}

	.form.OSFillParent span.input-text .form-control[class*='ThemeGrid_Width'].not-valid + span.validation-message,
	.form
		span.input-text
		.form-control[class*='ThemeGrid_Width'].not-valid.ThemeGrid_MarginGutter
		+ span.validation-message,
	.form-control[class*='ThemeGrid_Width'].not-valid + span.validation-message {
		left: 0;
	}
}

// IsRTL -------------------------------------------------------------------------
///
.is-rtl {
	form {
		&.OSFillParent {
			.form-control[class*='ThemeGrid_Width'].not-valid ~ span.validation-message {
				left: initial;
				right: 22px;
			}
		}
	}
}