.rrui__input-field
{
	border-radius : 0;
	/* Some web browsers add <input/> padding by default */
	padding       : 0;
	appearance    : none;
	-webkit-appearance : none;
	font-size     : inherit;
	font-family   : inherit;
	font-weight   : inherit;
	font-style    : inherit;
	color: var(--rrui-input-field-text-color);
}

/* Overrides Chrome autofill yellow background color. */
.rrui__input-field:-webkit-autofill
{
	box-shadow : 0 0 0 var(--rrui-input-field-shadow-radius--autofill) var(--rrui-input-field-background-color--autofill) inset;
}

/* Overrides Chrome autofill yellow background color (when `<TextInput/>` is focused). */
.rrui__input-field:focus:-webkit-autofill
{
	box-shadow : 0 0 0 var(--rrui-input-field-shadow-radius--autofill) var(--rrui-input-field-background-color-focus--autofill) inset;
}

/* Overrides Chrome autofill yellow background color (when `<TextInput/>` is invalid). */
.rrui__input-field--invalid:-webkit-autofill
{
	box-shadow : 0 0 0 var(--rrui-input-field-shadow-radius--autofill) var(--rrui-input-field-background-color-error--autofill) inset;
}

/* Overrides Chrome autofill yellow background color (when `<TextInput/>` is invalid). */
/* Overrides the corresponding `:focus` CSS rule. */
.rrui__input-field--invalid:focus:-webkit-autofill
{
	box-shadow : 0 0 0 var(--rrui-input-field-shadow-radius--autofill) var(--rrui-input-field-background-color-error-focus--autofill) inset;
}

/* For `<TextInput/>` and alike. */
.rrui__input-field,
/* For `<Select/>`. */
.rrui__select__button
{
	/* Stretches the inputs to full column width by default. */
	/* Because everyone uses CSS grids today. */
	width : 100%;

	padding-left  : var(--rrui-input-field-side-padding);
	padding-right : var(--rrui-input-field-side-padding);

	background-color : var(--rrui-input-field-background-color);
	border-radius : var(--rrui-input-field-border-radius);
}

/* For `<TextInput/>` and alike. */
.rrui__input-field,
/* For `<Select/>`. */
.rrui__select__button,
/* For `<Select native/>`. */
.rrui__select__native
{
	border: var(--rrui-input-field-border-width) solid var(--rrui-input-field-border-color);
	border-bottom-width: var(--rrui-input-field-border-bottom-width);
	transition: var(--rrui-input-field-transition);
}

/* For `<TextInput/>` and alike. */
.rrui__input-field:focus,
/* For `<Select/>` when `<button/>` is focused. */
.rrui__select__button:focus,
/* For `<Select/>` when `<select/>` is focused. */
.rrui__select__native:focus + .rrui__select__button,
/* For `<Select native={true}/>`. */
.rrui__select__native:focus
{
	border-color     : var(--rrui-input-field-border-color-focus);
	background-color : var(--rrui-input-field-background-color-focus);
}

/* For `<TextInput/>` and alike. */
.rrui__input-field--invalid,
/* For `<Select/>` when `<button/>` is focused. */
.rrui__select__button--invalid,
/* For `<Select native={true}/>`. */
.rrui__select__native--invalid
{
	border-color     : var(--rrui-input-field-border-color-error);
	background-color : var(--rrui-input-field-background-color-error);
}

/* For `<TextInput/>` and alike. */
.rrui__input-field--disabled,
/* For `<Select/>` when `<button/>` is focused. */
.rrui__select__button--disabled,
/* For `<Select native={true}/>`. */
.rrui__select__native--disabled
{
	border-color     : var(--rrui-input-field-border-color-disabled);
	background-color : var(--rrui-input-field-background-color-disabled);
}

/* For `<TextInput/>` and alike. */
/* Overrides the corresponding `:focus` CSS rule. */
.rrui__input-field--invalid:focus,
/* For `<Select/>` when `<button/>` is focused. */
/* Overrides the corresponding `:focus` CSS rule. */
.rrui__select__button--invalid:focus,
/* For `<Select/>` when `<select/>` is focused. */
/* Overrides the corresponding `:focus` CSS rule. */
.rrui__select__native--invalid:focus + .rrui__select__button,
/* For `<Select native={true}/>`. */
/* Overrides the corresponding `:focus` CSS rule. */
.rrui__select__native--invalid:focus
{
	border-color     : var(--rrui-input-field-border-color-error-focus);
	background-color : var(--rrui-input-field-background-color-error-focus);
}

.rrui__input-field
{
	height     : 100%;
	font-size  : inherit;
	box-sizing : border-box;
}

/* Resets height back to 100% for multiline text input */
.rrui__input-field--multiline
{
	height : auto;
	resize : none;
}

.rrui__input-field__icon {
	position: absolute;
	top: calc((var(--rrui-input-height) - var(--rrui-input-field-icon-size)) / 2);
	left: var(--rrui-input-field-icon-margin-left);
	width: var(--rrui-input-field-icon-size);
	height: var(--rrui-input-field-icon-size);
	pointer-events: none;
	color: var(--rrui-input-field-icon-color);
}

.rrui__input-field--with-icon {
	padding-left: calc(var(--rrui-input-field-icon-margin-left) + var(--rrui-input-field-icon-size) + var(--rrui-input-field-icon-margin-right));
}

/* `<input/>` placeholder color. */
/* https://www.w3schools.com/howto/howto_css_placeholder.asp */

/* Chrome, Firefox, Opera, Safari 10.1+ */
/* Won't work for some reason if combined with the IE rules below. */
.rrui__input-field::placeholder {
	color: var(--rrui-input-field-label-color);
	/* Firefox */
	opacity: 1;
}

/* Internet Explorer 10-11 */
.rrui__input-field:-ms-input-placeholder {
	color: var(--rrui-input-field-label-color);
}

/* Microsoft Edge */
.rrui__input-field::-ms-input-placeholder {
	color: var(--rrui-input-field-label-color);
}