.combobox-options {
  padding: 0;
  border: 0;
}

/* Flex so filtering can rank matches with `order` without moving any node */
.combobox-options [role='listbox'] {
  --height: 15rem;
  display: flex;
  flex-direction: column;
  max-height: var(--height);
  overflow-y: auto;
}

.combobox-options [role='option'] {
  cursor: pointer;
}

/* Keeps the pointer cursor over an option's own markup */
.combobox-options [role='option'] > * {
  pointer-events: none;
}

/* The band — where the keyboard or pointer is. Defaults to the platform's own colors for the current item in a list. */
.combobox-options [data-highlighted],
.combobox-options [role='option']:focus {
  color: var(--text-highlighted-color, HighlightText);
  background: var(--bg-highlighted-color, Highlight);
}

/* The selection — what was chosen. Both states can land on one option, so this takes a property the cursor doesn't. */
.combobox-options [aria-selected='true'] {
  box-shadow: inset 2px 0 0 0 var(--border-selected-color, currentColor);
}

/* Highlight pseudo-elements only take properties that don't affect layout, so the match can be recoloured but never bolded. font-weight here is silently ignored. */
::highlight(autocomplete-match) {
  color: var(--text-match-color, #7c3aed);
  text-decoration: underline;
}