/*
 * Small override layer for the hotwire_combobox gem's default stylesheet
 * (loaded above via `combobox_style_tag`). Keeps comboboxes visually
 * consistent with the rest of the app: full-width like other form fields,
 * and matching the dark low-contrast #282c34 palette instead of the gem's
 * default pure-white dropdowns.
 */

.hw-combobox,
.hw-combobox__main__wrapper {
  width: 100%;
}

@media (prefers-color-scheme: dark) {
  :root {
    --hw-active-bg-color: #2c313a;
    --hw-border-color: #3b4048;
    --hw-component-bg-color: #21252b;
    --hw-group-color: #6b7280;
    --hw-group-bg-color: #282c34;
    --hw-invalid-color: #f87171;
    --hw-dialog-label-color: #abb2bf;
    --hw-focus-color: #528bff;
    --hw-option-bg-color: #282c34;
  }

  .hw-combobox__dialog {
    background-color: #282c34;
    color: #abb2bf;
  }

  .hw-combobox__dialog__input {
    background-color: #21252b;
    color: #abb2bf;
  }

  .hw-combobox__dialog::backdrop {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 50%, #282c34 50%);
  }
}