/* Editable combobox with a listbox popup (RelationCombobox.ts, WAI-ARIA APG list autocomplete). */
/* Label, combobox and help text: as wide as the widest of them (the help text), but never wider than the page,
   where the help text wraps instead. */
.combobox-field {
	width: fit-content;
	max-width: 100%;
}

.combobox {
	position: relative;
}

/* Decorative search icon inside the input (a spinner while searching); clicks pass through to the input.
   Centred with top/bottom instead of a transform: fa-spin animates transform and would undo the centring. */
.combobox-icon {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0.75rem;
	display: flex;
	align-items: center;
	color: var(--bs-secondary-color);
	pointer-events: none;
}

.combobox-input {
	padding-left: 2.25rem;
}

.combobox-popup {
	position: absolute;
	z-index: 1000;
	top: calc(100% + 0.25rem);
	left: 0;
	right: 0;
	background-color: var(--bs-body-bg, #fff);
	border: 1px solid var(--bs-border-color, #dee2e6);
	border-radius: 0.375rem;
	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
	overflow: hidden;
}

.combobox-popup[hidden] {
	display: none;
}

.combobox-listbox {
	max-height: 20rem;
	overflow-y: auto;
	margin: 0;
	padding: 0;
	list-style: none;
	scrollbar-width: thin;
	scrollbar-color: var(--bs-border-color, #dee2e6) transparent;
}

.combobox-listbox[hidden] {
	display: none;
}

/* No results or a failed search: the popup shows this line instead of options. */
.combobox-message {
	margin: 0;
	padding: 0.75rem;
	color: var(--bs-secondary-color);
}

.combobox-message[hidden] {
	display: none;
}

.combobox-more {
	margin: 0;
	padding: 0.5rem 0.75rem;
	font-size: 0.875rem;
	color: var(--bs-secondary-color);
	border-top: 1px solid var(--bs-border-color, #dee2e6);
}

.combobox-more[hidden] {
	display: none;
}

/* Full-width rows: the listbox has no padding, so a highlight runs edge to edge (the popup's rounded corners clip it). */
.combobox-option {
	display: flex;
	flex-direction: column;
	padding: 0.5rem 0.75rem;
	cursor: pointer;
}

.combobox-option:hover {
	background-color: var(--bs-primary-50);
}

/* The bar on the left marks the highlighted option without relying on the light background colour alone. */
.combobox-option[aria-selected="true"] {
	background-color: var(--bs-primary-100);
	box-shadow: inset 3px 0 0 var(--bs-primary);
}

.combobox-option-title {
	font-weight: 600;
}

/* The part of a suggestion that matched the search: underlined (and bold in the details) rather than coloured, so it
   stays readable on the highlighted option and in high-contrast mode. */
.combobox-option mark {
	padding: 0;
	background: none;
	color: inherit;
	font-weight: 700;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

.combobox-option-details {
	font-size: 0.875rem;
	color: var(--bs-secondary-color);
}

/* Windows high-contrast mode drops backgrounds and shadows: outline the highlighted option instead. */
@media (forced-colors: active) {
	.combobox-option[aria-selected="true"] {
		outline: 2px solid Highlight;
		outline-offset: -2px;
	}
}

/* A combobox that replaces a select (SelectCombobox.ts): the form-select look, with an up/down chevron instead of the
   down one, in the same colour and place. Same 16x16 viewBox and stroke as the form-select chevron, shown at its size
   (16px 12px), so the lines are as thin. */
.form-select.combobox-select {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m3 6 5-5 5 5M3 10l5 5 5-5'/%3e%3c/svg%3e");
}

/* Firefox: .form-select:-moz-focusring makes the text transparent (drawn as a text-shadow instead), to hide the dotted
   focus ring inside a real select. On this input that hides the text cursor too: keep the normal colour. */
.form-select.combobox-select:-moz-focusring {
	color: var(--bs-body-color);
	text-shadow: none;
}