/* Patterns - Interaction - Input With Icon */
////
/// @group Patterns-Input_With_Icon
/// Patterns - Interaction - Input With Icon

///
.input-with-icon {
	display: flex;
	position: relative;

	&.input-with-icon-right {
		.input-with-icon-content-icon {
			left: auto;
			right: 0;

			&:not(:empty) + .input-with-icon-input input {
				padding-left: var(--space-base);
				padding-right: var(--space-xl);
			}

			&.search-actions {
				left: 0;
				right: auto;
			}
		}
	}

	.input-with-icon {
		&-content-icon {
			display: inline-flex;
			height: 100%;
			left: 0;
			position: absolute;
			width: 40px;

			&,
			a {
				color: get-text-color('neutral-7');
			}

			&:not(:empty) + .input-with-icon-input input {
				padding-left: var(--space-xl);
			}

			&.search-actions {
				left: auto;
				right: 0;

				&:hover {
					color: get-text-color('neutral-8');
					cursor: pointer;
				}
			}
		}

		&-input {
			&,
			input {
				width: 100%;
			}
		}
	}

	.fa-fw {
		width: auto;
	}

	span {
		&.validation-message {
			display: block;
			position: absolute;
		}
	}
}

///
.form {
	.input-with-icon {
		.input-with-icon-content-icon {
			padding-bottom: var(--space-m);
			z-index: var(--layer-local-tier-1);
		}

		.form-control[class*='ThemeGrid_Width'].not-valid ~ span.validation-message {
			left: 0;
		}
	}
}