.rrui__input-label
{
	position : absolute;
	left     : 0;
	top      : 0;

	display     : flex;
	align-items : center;

	white-space : nowrap;
	font-size   : inherit;
	user-select : none;
	pointer-events : none;

	/*
	When changing this label color
	one could also change "input" and "textarea" placeholder color
	if using `placeholder` property.
	Changing `:placeholder` color is not widely supported though.
	*/
	color : var(--rrui-input-field-label-color);

	transform        : scale(var(--rrui-input-label-focus-scale)) translateY(var(--rrui-input-label-focus-top-offset));
	transform-origin : left top;
	transition       : color 0.1s ease-out, transform 450ms cubic-bezier(0.23, 1, 0.32, 1);
}

/* Focused input label. */

/* For `<Select native={false}/>` (default). */
.rrui__select__native:focus + .rrui__select__button + .rrui__input-label,
/* For `<Select native={true}/>`. */
.rrui__select__native:focus + .rrui__input-label,
/* For `<TextInput/>`, `<Autocomplete/>`, `<DatePicker/>`. */
.rrui__input-element:focus + .rrui__input-label
{
	color : var(--rrui-input-field-label-color-focus);
}