.rrui__text-input__label--invalid
{
	color : var(--rrui-input-field-label-color-error);
}

.rrui__input-field:not(:focus) + .rrui__text-input__label--placeholder
{
	transform: translateX(var(--rrui-input-field-side-padding)) translateY(0) scale(1);
	/* Introducing a return animation delay */
	/* because when a user clicks/taps on an option in */
	/* a <Select/> it loses :focus for a moment */
	/* causing the return animation to start playing */
	/* and then revert back as the click finishes */
	/* returning focus to the input, so there should be */
	/* a slight delay to prevent visual jitter. */
	transition-delay: 100ms;
}

/* Set the default height of multiline `<TextInput/>`s. */
.rrui__input-field--multiline
{
	height         : var(--rrui-multiline-text-height);
	padding-top    : var(--rrui-multiline-text-input-vertical-padding);
	padding-bottom : var(--rrui-multiline-text-input-vertical-padding);
	padding-left   : var(--rrui-input-field-side-padding);
	padding-right  : var(--rrui-input-field-side-padding);
	/* Fixes the spacing bug between `<textarea/>` and its container. */
	/* https://stackoverflow.com/questions/35906806/how-to-remove-space-between-textarea-and-parent-div */
	vertical-align : top;
}

/* Multiline `<TextInput/>`'s label positioning. */
/* Must be same as `padding-top`/`padding-bottom`. */
.rrui__text-input__label--multiline
{
	top : var(--rrui-multiline-text-input-vertical-padding);
}