.select {
	--bg: Field;
	--text: FieldText;
	--focus-bg: Highlight;
	--focus-text: HighlightText;
	--hover-bg: rgba(118,118,118,.3);
	--border: rgba(118,118,118,.5);
	--selected-bg: Highlight;
	--selected-text: HighlightText;
	--disabled-text: GrayText;

	position: relative;
}

.select > input {
	inline-size: 100%;
	box-sizing: border-box;
}

.select__dropdown {
	position: absolute;
	z-index: 2;
	list-style: none;
	margin: 0;
	padding: 0;
	background: var(--bg);
	color: var(--text);
	font-family: sans-serif;
	font: -webkit-small-control;
	font: -moz-field;
	border: 1px solid var(--bg);
	outline: 1px solid var(--border);
	border-block-start: 0;
	inset-inline: 0;
	overflow-y: auto;

	/* line-height and block-size are chosen so that the last line is only */
	/* half visible (to indicate that there is more below) */
	line-height: 1.2;
	max-block-size: 10.4em;
}
.select__dropdown:empty {
	display: none;
}

.select__dropdown [role="option"],
.select__dropdown strong {
	display: block;
	padding-block: 0.2em;
	padding-inline: 0.4em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: default;
}
.select__dropdown [role="option"].select--selected,
.select__dropdown [role="option"]:hover {
	background: var(--hover-bg);
	color: inherit;
}
.select__dropdown [role="option"].select--has-focus {
	background: var(--selected-bg);
	color: var(--selected-text);
}
.select__dropdown [role="option"][aria-disabled="true"] {
	background: transparent;
	color: var(--disabled-text);
}
.select__dropdown ul {
	margin: 0;
	padding: 0;
}
.select__dropdown ul [role="option"] {
	padding-inline-start: 2em;
}

.select__input {
	position: relative;
}
.select__input input {
	position: relative;  /* on top of values */
}

.select__values {
	position: absolute;
	padding: 0;
	margin: 0;
	border: 1px solid transparent;
}
.select__values li {
	display: inline-block;
	position: relative;
	z-index: 1;  /* on top of input */
	margin-block-end: 0.2em;
	margin-inline-end: 0.2em;
	cursor: default;
}
.select__value {
	padding-inline: 0.2em;
	background: var(--hover-bg);
	color: var(--text);
	border: 1px solid var(--border);
	border-radius: 0.3em;
}
.select__value--focus {
	background: var(--focus-bg);
	color: var(--focus-text);
}

.select__measure {
	inline-size: 0;
	block-size: 0;
	overflow: hidden;
	white-space: pre;
}

@media (prefers-color-scheme: dark) {
	.select {
		color-scheme: dark;
	}
}