.hw-combobox {
  --hw-active-bg-color: color-mix(in oklab, var(--color-primary) 18%, transparent);
  --hw-component-bg-color: var(--color-base-100);
  --hw-focus-color: var(--color-base-content);
  --hw-group-bg-color: var(--color-base-100);
  --hw-group-color: color-mix(in oklab, var(--color-base-content) 65%, transparent);
  --hw-input-color: color-mix(in oklab, var(--color-base-content) 20%, transparent);
  --hw-border-color: var(--hw-input-color);
  --hw-option-bg-color: var(--color-base-100);
  --hw-border-radius: var(--radius-field);
  --hw-combobox-width: 100%;
  --hw-dialog-label-color: var(--color-base-content);
  --hw-font-size: 0.875rem;
  --hw-listbox-z-index: 1000;
  --hw-line-height: 1.25rem;
  --hw-listbox-height: calc(var(--hw-line-height) * 10 + 1rem);
  --hw-padding--slimmer: 0.25rem;
  --hw-padding--slim: 0.5rem;
  --hw-padding--thick: 0.75rem;
  display: flex;
  position: relative;
  width: 100%;
}

.hw-combobox:focus-within {
  z-index: var(--hw-listbox-z-index);
}

.hw-combobox__label {
  color: var(--color-base-content);
}

.hw-combobox__main__wrapper {
  min-height: 2.5rem;
  width: 100%;
  border: var(--border) solid var(--hw-border-color);
  border-radius: var(--radius-field);
  background-color: var(--color-base-100);
  transition:
    border-color 120ms ease,
    box-shadow 120ms ease,
    background-color 120ms ease;
}

.hw-combobox__main__wrapper:focus-within {
  border-color: var(--hw-focus-color);
  outline: 2px solid var(--hw-focus-color);
  outline-offset: 2px;
  isolation: isolate;
}

.hw-combobox__input {
  min-height: 1.25rem;
  background-color: transparent;
  color: var(--color-base-content);
}

.hw-combobox__input::placeholder {
  color: color-mix(in oklab, var(--color-base-content) 55%, transparent);
}

.hw-combobox__handle {
  opacity: 0.8;
}

.hw-combobox__listbox {
  overflow: hidden auto;
  z-index: var(--hw-listbox-z-index);
  border-radius: var(--radius-box);
  background: var(--color-base-100);
  box-shadow: 0 1rem 2rem rgb(0 0 0 / 0.32);
  pointer-events: auto;
}

.hw-combobox__option {
  background: var(--color-base-100);
  color: var(--color-base-content);
  cursor: pointer;
}

.hw-combobox__option--blank {
  border-bottom-color: var(--color-base-300);
  color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
}

.hw-combobox__option:hover,
.hw-combobox__option--navigated {
  background-color: color-mix(in oklab, var(--color-primary) 18%, transparent);
}

.hw-combobox__option--selected {
  background-color: color-mix(in oklab, var(--color-primary) 28%, transparent);
  font-weight: 600;
}

.hw-combobox__dialog {
  border-radius: var(--radius-box) var(--radius-box) 0 0;
  background-color: var(--color-base-100);
  color: var(--color-base-content);
}

.hw-combobox__dialog::backdrop {
  background: rgb(0 0 0 / 0.6);
}

.hw-combobox__dialog__input {
  border-color: var(--hw-border-color);
  border-radius: var(--radius-field);
  background-color: var(--color-base-200);
  color: var(--color-base-content);
}

.hw-combobox__dialog__input:focus {
  border-color: var(--hw-focus-color);
  outline: 2px solid var(--hw-focus-color);
  outline-offset: 2px;
}

.hw-combobox__dialog__listbox [role="option"] {
  color: var(--color-base-content);
}