:root {
  --hw-combobox-width: unset;
  --hw-combobox-width--multiple: unset;
}

body {
  --hw-border-width--slim: var(--border-width);
  --hw-border-radius: 0px;
  --hw-component-bg-color: var(--theme-bg-color);
  --hw-active-bg-color: var(--theme-bg-muted);
  --hw-option-bg-color: var(--theme-bg-color);
  --hw-border-color: var(--border-color);
  --hw-focus-color: var(--theme-accent-color);
  --hw-handle-width: var(--filter-icon-size);
  --hw-line-height: var(--filter-input-line-height);

  .hw-combobox__dialog {
    background-color: var(--theme-bg-color);
  }

  .hw-combobox__main__wrapper {
    padding: 0;
    border: none;
    display: flex;
    justify-content: space-between;
    height: 100%;
    background-color: inherit;

    &:focus-within {
      box-shadow: none;
    }
  }

  .hw-combobox__input[data-queried] + .hw-combobox__handle::before {
    background-image: none;
    background-size: var(--hw-handle-width--queried);
  }
  .hw-combobox__handle {
    position: unset;

    &::before {
      background-image: none;
      position: initial;
      vertical-align: middle;
    }
  }

  .hw-combobox__input, .hw-combobox__dialog__input {
    background-color: var(--theme-bg-color);
    color: var(--theme-fg-color);
  }

  /* Match the selected-style chips to the filter's applied tags (.filter .tag,
     accent-filled, font-size 75%, line-height 1). The gem otherwise inflates
     them with a 1.5rem line-height and a 1rem-min remover. */
  .hw-combobox__chip {
    border: var(--tag-border-width) solid var(--theme-accent-color);
    background-color: var(--theme-accent-color);
    color: var(--theme-bg-color);
    padding: 5px;
    font-size: 75%;
    line-height: 1;
    white-space: nowrap;
  }

  /* The gem renders the × as a fixed grey SVG background-image, which clashes
     with the accent chip. Mask the shape and fill it with currentColor (the
     chip's text colour, --theme-bg-color) so it matches the label exactly and
     adapts to light/dark for free — the "punched" look the filter tags have. */
  .hw-combobox__chip__remover {
    min-height: 0;
    min-width: 0;
    width: 1em;
    height: 1em;
    margin-left: var(--gap-small);
    background-image: none;
    background-color: currentColor;
    --hw-chip-remover-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 18 18 6M6 6l12 12'/%3E%3C/svg%3E");
    -webkit-mask: var(--hw-chip-remover-mask) center / contain no-repeat;
    mask: var(--hw-chip-remover-mask) center / contain no-repeat;
  }

  /* The default dropdown reads as a heavy green slab: a 2px full-accent frame
     around tall, airy 1rem rows. Soften it into a crisp menu — hairline frame,
     denser rows, slightly smaller type — without abandoning the terminal box. */
  .hw-combobox__listbox {
    border-width: var(--tag-border-width);
    /* Sit flush against the field's underline. The gem's 0.2rem nudge is
       measured from the inner combobox box, which leaves the popup overlapping
       up into the field; offset instead by the wrapper's padding-bottom +
       border so the popup top meets the underline with no gap or overlap. */
    top: calc(100% + var(--gap-small) + var(--border-width) - 1px);
  }

  .hw-combobox__option {
    padding: var(--gap-xsmall) var(--gap-small);
    font-size: 0.9rem;
    line-height: 1.5;
  }
}