/* Form-input kit (SearchSelectComponent, MultiSelectComponent): the text
   box is a native input — ARIA combobox wiring (aria-activedescendant)
   needs light-DOM ids, which wa-input's shadow input can't reference —
   styled by Web Awesome's native styles. WA has no listbox primitive, so
   the dropdown panel is composed from tokens. */
.combobox {
  display: flex;
  flex-direction: column;
  gap: var(--wa-space-3xs);
}

.combobox-control {
  position: relative;
}

.combobox-control input {
  width: 100%;
  box-sizing: border-box;
  /* room for the spinner/clear indicators overlaying the inline end */
  padding-inline-end: calc(var(--wa-space-xl) + var(--wa-space-l));
}

.combobox-indicators {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: var(--wa-space-xs);
  translate: 0 -50%;
  display: flex;
  align-items: center;
  gap: var(--wa-space-2xs);
}

.combobox-panel {
  background: var(--wa-color-surface-raised);
  border: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-m);
  box-shadow: var(--wa-shadow-m);
  padding: var(--wa-space-3xs);
  max-block-size: 18rem;
  overflow-y: auto;
}

.combobox-options {
  margin: 0;
  padding: 0;
  list-style: none;
}

.combobox-option {
  padding: var(--wa-space-2xs) var(--wa-space-s);
  border-radius: var(--wa-border-radius-s);
  cursor: pointer;
}

.combobox-option[data-active] {
  background: var(--wa-color-neutral-fill-quiet);
}

.combobox-option[aria-selected="true"] {
  font-weight: var(--wa-font-weight-semibold);
}

.combobox-create {
  color: var(--wa-color-brand-on-quiet);
}

.combobox-empty {
  margin: 0;
  padding: var(--wa-space-2xs) var(--wa-space-s);
  color: var(--wa-color-text-quiet);
}