.combobox {
  position: relative;
}

.combobox__options {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: var(--space-xs) 0 0;
  padding: var(--space-xs);
  list-style: none;
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-md);
  max-height: 240px;
  overflow-y: auto;
  z-index: 10;
  box-shadow: var(--shadow-lg);
}

.combobox__option {
  padding: var(--space-sm) var(--space-smd);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--text-base);
  transition: background var(--dur) var(--ease-out);
}

.combobox__option:hover {
  background: var(--surface-hover);
}

.combobox__option[hidden] {
  display: none;
}

.combobox__option-name {
  font-weight: var(--weight-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}