/* `<Select/>` goes fullscreen when expanded. */
/* Same as for `<DatePicker/>`. */
.rrui__expandable
{
	position : fixed;
	top      : 0;
	bottom   : 0;
	right    : 0;
	left     : 0;
	margin   : 0;
	z-index  : var(--rrui-z-index-overlay);

	transform-origin : center center;
	transform        : scale(0.95);
	opacity          : 0;
	transition       : transform 120ms ease-out, opacity 60ms ease-out;
}

.rrui__expandable.rrui__expandable--expanded
{
	transform : scale(1);
	opacity   : 1;
}

.rrui__select .rrui__options-list
{
	/* Resets the `width` set in `Select.css` */
	width : 100%;
	/* `<Select/>` options no top margin. */
	margin-top : 0;
}

.rrui__scrollable
{
	max-height : none !important;
}

.rrui__expandable,
.rrui__expandable__content
{
	height : 100%;
}

/* Disable `<Select/>` options `:hover` effect. */
/* Because `:hover` coloration would create extra
   visual clutter for the collapse animation. */
.rrui__expandable .rrui__list__item:hover
{
	color : var(--rrui-black-color);
	background-color : transparent;
}

/* Show "Close" button for full-screen `<Select/>`. */
/* Same as for `<DatePicker/>`. */
.rrui__expandable__close
{
	display : block;
	z-index : var(--rrui-z-index-overlay);
}

/* `<Select autocomplete/>` goes fullscreen when expanded */
.rrui__autocomplete--expanded .rrui__autocomplete__input
{
	position         : fixed;
	top              : 0;
	left             : 0;
	width            : 100%;
	height           : var(--rrui-fullscreen-input-height);
	padding-left     : var(--rrui-list-item-side-padding);
	padding-right    : calc(var(--rrui-unit) * 2 + var(--rrui-unit) * 3 + var(--rrui-list-item-side-padding));
	z-index          : var(--rrui-z-index-overlay);
	background-color : var(--rrui-white-color);
}

/* `<Select autocomplete/>` ellipsis when fullscreen-expanded */
.rrui__autocomplete--expanded .rrui__ellipsis
{
	position    : fixed;
	right       : var(--rrui-list-item-side-padding);
	top         : 0;
	z-index     : var(--rrui-z-index-above-overlay);
	height      : var(--rrui-fullscreen-input-height);
	display     : flex;
	align-items : center;
}

/* `<Select autocomplete/>` options when fullscreen-expanded */
.rrui__autocomplete .rrui__list
{
	margin-top : var(--rrui-fullscreen-input-height);
	box-shadow : none;
}