/* components/combobox: the field in the kit's field look (a frame in the text colour, at least the touch target
   high, the kit's focus outline); the list drops down under it over the page, the width of the field, at most
   about ten options high and scrolling past that. The option the arrow keys reached (aria-selected) has the accent
   colours and an outline, so it shows in forced colours too; an option under the pointer has the hover colours. */
@layer components {
	.dv-combobox {
		position: relative;
	}

	.dv-combobox-input {
		box-sizing: border-box;
		inline-size: 100%;
		min-block-size: var(--touch-target);
		padding: var(--space-1) var(--space-2);
		border: 2px solid var(--color-text);
		border-radius: var(--radius-panel);
		font: inherit;
		color: var(--color-text);
		background: var(--color-background);
	}

	.dv-combobox-input:focus-visible {
		outline: var(--focus-outline-width) solid var(--color-focus-outline);
		outline-offset: var(--focus-outline-offset);
		box-shadow: 0 0 0 var(--focus-outline-offset) var(--color-focus-text);
	}

	.dv-combobox-listbox {
		position: absolute;
		inset-block-start: calc(100% + var(--space-1));
		inset-inline: 0;
		z-index: 10;
		box-sizing: border-box;
		max-block-size: 22em;
		margin: 0;
		padding: var(--space-1) 0;
		overflow-y: auto;
		list-style: none;
		color: var(--color-on-secondary);
		background: var(--color-surface);
		border: 2px solid var(--color-border);
		border-radius: var(--radius-panel);
		box-shadow: var(--shadow-panel);
	}

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

	.dv-combobox-option {
		padding: var(--space-2) var(--space-3);
		cursor: pointer;
		overflow-wrap: anywhere;
	}

	.dv-combobox-option:hover {
		color: var(--color-on-secondary-hover);
		background: var(--color-secondary-hover);
	}

	.dv-combobox-option[aria-selected="true"] {
		color: var(--color-on-accent);
		background: var(--color-accent);
		outline: var(--focus-outline-width) solid var(--color-focus-outline);
		outline-offset: calc(-1 * var(--focus-outline-width));
	}
}