.fsComboBox [role="textbox"]
{
	box-sizing: border-box;
	width: 100%;
	height: calc(1em + 22px);
	padding: 5px;
	border: 1px solid black;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;

	background-color: white;
}

/* down arrow */
.fsComboBox [role="textbox"]::after
{
	content: '';
	position: absolute;

	right: 15px;
	top: calc(50% - 8px);
	height: 8px;
	width: 8px;

	border: solid currentColor;
	border-width: 0 0 1px 1px;

	transform: rotate(-45deg);
	transform-origin: 25% 75%;
}

.fsComboBox[aria-expanded="true"] [role="textbox"]::after
{
	transform: rotate(-225deg);
}

.fsComboBox button::after
{
	content: '\a0×';
}

.fsComboBox button
{
	border: none;
	margin: 0 5px 0 0;
	padding: 0 .5em;
	width: auto;
	overflow: visible;
	background: #ddd;
	color: inherit;
	font: inherit;
	text-transform: inherit;
	text-align: inherit;

	box-sizing: border-box;
	display: inline-flex;

	/* Corrects font smoothing for webkit */
	-webkit-font-smoothing: inherit;
	/* Corrects inability to style clickable `input` types in iOS */
	-webkit-appearance: none;
}

.fsComboBox button:not(:only-child)
{
	max-width: calc(50% - 5px - 1.1em);
}

.fsComboBox button span
{
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.fsComboBox button:is(:hover, :focus)
{
	background: #eee;
}

/* todo - add toggle button back in or use focus
.fsComboBox button.toggle:focus
{
	outline: none;
	box-shadow: none;
}

.fsComboBox button.toggle {
	background-color: #fff;
	padding: 0;
	border-top: 8px solid #6c6c6c;
	border-right: 8px solid transparent;
	border-bottom: none;
	border-left: 8px solid transparent;
	position: absolute;
	right: 10px;
	top: 21px;
	width: 16px;
}
*/

.fsComboListBox
{
	display: none;
	z-index: 99999;

	outline: 0;

	position: absolute;
	list-style: none;
	background-color: #fff;
	font-size: 1em;
	width: 100%;
	box-sizing: border-box;

	margin: 0;
	padding: 0;

	border: 1px solid black;
	border-top-width: 0;
	margin-top: -1px;

	max-height: max(200px, 50vh);
	overflow: auto;
}

.fsComboListBox.open
{
	display: block;
}

.fsComboListBox:empty::after
{
	content: 'No options';
	font-style: italic;
	display: block;
}

.fsComboListBox li,
.fsComboListBox::after
{
	padding: 10px 15px;
	margin: 0;
	position: relative;
}

.fsComboListBox li[aria-disabled=true]
{
	display: none;
}

.fsComboListBox li label
{
	pointer-events: none;
}

.fsComboListBox li:is(.active, :hover, :focus-within)
{
	background-color: #ddd;
	color: black;
}