.rrui__select
{
	/* This is for `.rrui__select__options` to be positioned
	   correctly relative to the `<Select/>` itself. */
	position : relative;
	user-select : none;
}

.rrui__select .rrui__options-list
{
	/*
	`<Select/>` options text should be at least fully visible.
	At the same time `<Select/>` options should stretch themselves
	horizontally to the width of the containing column (when using grid layout).
	*/
	width : calc(100% + var(--rrui-options-list-negative-side-margin) * 2);

	/*
	`margin-top` is constituted by:
	- `.rrui__select__options` `padding-top`.
	- `.rrui__input` `height`.
	- half of the difference between `.rrui__select__option`'s `height`/`line-height` and `.rrui__input` `height`.
	*/
	margin-top : calc(-1 * (var(--rrui-list-vertical-padding) + var(--rrui-input-height) + (var(--rrui-list-item-height) - var(--rrui-input-height)) / 2));
}

.rrui__select__button
{
	height: 100%;
	box-sizing: border-box;
	color: inherit;
	/* Because Chrome adds `text-align: center` for all buttons */
	text-align: left;
	/* Not introducing an animation on `.rrui__select__option`
	   because it would introduce a little clutter due to
	   focused option animation in autocomplete mode */
	transition: var(--rrui-select-toggler-transition);
}

.rrui__select__button--expanded
{
	color : var(--rrui-select-toggler-text-color-active);
}

.rrui__select__button--empty .rrui__select__selected-label
{
	color: var(--rrui-select-toggler-text-color-empty);
}

/* For `<Select native={false}/>` (default). */
.rrui__select__native:active + .rrui__select__button .rrui__select__selected-label,
.rrui__select__native:active + .rrui__select__button .rrui__select__arrow,
/* For `<Select native={true}/>`. */
.rrui__select__native:active + .rrui__input-label
{
	color : var(--rrui-select-toggler-text-color-active);
}

.rrui__select__selected-content
{
	display     : flex;
	align-items : center;
}

.rrui__select__selected-label
{
	flex: 1 1 auto;
}

.rrui__select .rrui__ellipsis
{
	position : absolute;
	right    : calc(var(--rrui-unit) / 3);
	top      : calc(50% - var(--rrui-unit) / 6);

	pointer-events : none;
}

.rrui__select__arrow
{
	width  : 0;
	height : 0;

	margin-left   : var(--rrui-select-arrow-margin-left);
	margin-right  : var(--rrui-select-arrow-margin-right);
	margin-top    : var(--rrui-select-arrow-margin-top);

	opacity : var(--rrui-select-arrow-opacity);
	color   : var(--rrui-select-arrow-color);

	/*transition : opacity 100ms ease-out;*/

	/* border-width: arrow_height arrow_width/2 0 arrow_width/2 */
	border-width : var(--rrui-select-arrow-border-width);

	border-style       : solid;
	border-left-color  : transparent;
	border-right-color : transparent;
}

.rrui__select--compact
{
	/* Reverts `width: 100%` set at the top of this file */
	width : auto;
	/* If it's `compact` then it's most likely inlined */
	display : inline-block;
}

.rrui__select--compact .rrui__expandable-list
{
	width : auto;
}

/* Stretches the inputs to full column width by default. */
/* Because everyone uses CSS grids today. */
.rrui__select__button,
.rrui__select__native
{
	width: 100%;
}

.rrui__select__native
{
	height: 100%;
	cursor: pointer;
}

.rrui__select__native--disabled
{
	cursor: default;
}

/* Something from stackoverflow. */
.rrui__select__native-option--divider
{
	font-size  : 1px;
	background : currentColor;
}

/* ChromeVox has a bug where `opacity: 0` elements are ignored. */
/* https://github.com/michalsnik/aos/issues/397 */
/* opacity  : 0.001; */
.rrui__select__native--overlay
{
	position : absolute;

	/* `z-index` caused a bug when select `<button/>`
	    would be above other content on a page.
	    For example, when there were two `<Select/>`s
	    one below another then mouse down events
	    from the options list of the top select
	    would "go through" to the bottom select
	    expanding it. */
	/* z-index  : 1; */

	opacity : 0;
}

.rrui__select__toggler
{
	display : inline-block;
}