/* Widgets - Inputs and TextAreas */
////
/// @group Widgets-Input_And_Textarea
/// Widgets - Inputs and TextAreas

/* Input placeholder style */
::-webkit-input-placeholder {
	color: get-text-color('neutral-7');
}

::-moz-placeholder {
	color: get-text-color('neutral-7');
}

:-ms-input-placeholder {
	color: get-text-color('neutral-7');
}

/* Iuput and TextArea */
///
.form-control {
	&[data-input],
	&[data-textarea] {
		background-color: get-background-color('neutral-0');
		border: var(--border-size-s) solid get-border-color('neutral-5');
		border-radius: var(--border-radius-soft);
		color: get-text-color('neutral-9');
		font-size: var(--font-size-s);
		transition: all 180ms linear;

		&:hover {
			border: var(--border-size-s) solid get-border-color('neutral-6');
		}

		&:focus {
			border: var(--border-size-s) solid get-border-color('primary');
		}

		&[disabled] {
			background-color: get-background-color('neutral-2');
			border: var(--border-size-s) solid get-border-color('neutral-4');
			color: get-text-color('neutral-6');
		}
	}

	&[data-input] {
		height: 40px;
		padding: var(--space-none) var(--space-base);
	}

	&[data-textarea] {
		height: auto;
		padding: var(--space-base);
		resize: auto;
	}

	/* Small sizes */
	&.input {
		&-small {
			&[data-input] {
				font-size: var(--font-size-xs);
				height: 32px;
				padding: var(--space-none) var(--space-s);
			}

			&[data-textarea] {
				font-size: var(--font-size-xs);
				padding: var(--space-s);
			}
		}

		/* Large sizes */
		&-large {
			&[data-input] {
				font-size: var(--font-size-base);
				height: 48px;
			}

			&[data-textarea] {
				font-size: var(--font-size-base);
			}
		}
	}

	/* Error */
	&.not-valid {
		&[data-input],
		&[data-textarea] {
			border: var(--border-size-s) solid get-border-color('error');
		}
	}
}

/* Responsive ----------------------------------------------------------------- */
///
.tablet,
.phone {
	.form-control {
		&[data-input] {
			font-size: var(--font-size-base);
			height: 48px;

			// Repeated selector since the properties above will ends up in a selector with more specificity
			&.input-small {
				font-size: var(--font-size-xs);
				height: 32px;
			}
		}

		&[data-textarea] {
			font-size: var(--font-size-base);
			height: auto;

			// Repeated selector since the properties above will ends up in a selector with more specificity
			&.input-small {
				font-size: var(--font-size-xs);
			}
		}
	}
}

/* Other layout places -------------------------------------------------------- */
///
.layout-native {
	.header-top-content {
		.form-control {
			&[data-input] {
				background-color: get-app-settings-background-color('header', --header-color);
				border: 0;
				border-bottom: var(--border-size-s) solid get-border-color('transparent');
				border-radius: 0;

				&:focus {
					border-bottom: var(--border-size-s) solid get-border-color('primary');
				}
			}
		}
	}
}

/* Accessibility -------------------------------------------------------------- */
///
.has-accessible-features {
	.form-control {
		&[data-input],
		&[data-textarea] {
			border-color: get-border-color('neutral-7');

			&:hover {
				border-color: get-border-color('neutral-8');
			}

			&:focus {
				border-color: get-border-color('focus-inner');
			}

			&.not-valid {
				&,
				&:hover,
				&:focus {
					border-color: get-border-color('error');
				}
			}
		}
	}
}