:root {
  --hw-combobox-width: 100%;
  --hw-handle-width: 0px;
  --hw-handle-offset-right: 0px;
  --hw-listbox-z-index: 1000;
}

.hw-combobox__listbox {
  background-color: rgb(var(--color-bg-card) / 1);
}

.combobox-field .hw-combobox__listbox {
  border: 1px solid rgb(var(--color-border) / 1);
  border-radius: 0.5rem;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.08),
    0 16px 32px -8px rgba(0, 0, 0, 0.12);
  max-height: 24rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0;
  margin-top: 0.375rem;
  width: 100%;
}

.combobox-field .hw-combobox__listbox::-webkit-scrollbar {
  width: 6px;
}

.combobox-field .hw-combobox__listbox::-webkit-scrollbar-track {
  background: transparent;
}

.combobox-field .hw-combobox__listbox::-webkit-scrollbar-thumb {
  background: rgb(var(--color-text-tertiary) / 0.2);
  border-radius: 3px;
}

.combobox-field .hw-combobox__option {
  cursor: pointer;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgb(var(--color-border-light) / 1);
  transition: background-color 100ms ease;
}

.combobox-field .hw-combobox__option:last-child,
.combobox-field .hw-combobox__option:last-of-type {
  border-bottom: none;
}

.combobox-field .hw-combobox__option:first-child {
  border-radius: 0.5rem 0.5rem 0 0;
}

.combobox-field .hw-combobox__option:last-child {
  border-radius: 0 0 0.5rem 0.5rem;
}

.combobox-field .hw-combobox__option:only-child {
  border-radius: 0.5rem;
}

.combobox-field .hw-combobox__option:hover,
.combobox-field .hw-combobox__option--navigated {
  background-color: rgb(var(--color-bg-hover) / 1);
}

.combobox-field .hw-combobox__option--selected {
  background-color: rgb(var(--color-info-bg) / 0.4);
}

.combobox-field .hw-combobox__handle {
  display: none;
}

.combobox-option-primary {
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.375rem;
  color: rgb(var(--color-text-primary) / 1);
  letter-spacing: -0.01em;
}

.combobox-option-accent {
  color: rgb(var(--color-primary) / 1);
  font-weight: 600;
}

.combobox-option-secondary {
  font-size: 0.8125rem;
  line-height: 1.25rem;
  color: rgb(var(--color-text-secondary) / 1);
  margin-top: 0.125rem;
}

.combobox-option-tertiary {
  font-size: 0.75rem;
  line-height: 1.125rem;
  color: rgb(var(--color-text-tertiary) / 1);
  margin-top: 0.125rem;
}

.combobox-option-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.1875rem;
}

.combobox-option-tag {
  display: inline-block;
  padding: 0.0625rem 0.375rem;
  border-radius: 0.1875rem;
  font-size: 0.6875rem;
  font-weight: 500;
  background-color: rgb(var(--color-bg-tertiary) / 1);
  color: rgb(var(--color-text-secondary) / 1);
}