.multi-select {
  width: 100%;
  flex: 1 1 16rem;
  min-width: 0;
}

/* MultiSelectComponent: one bordered control shell (form-control tokens,
   focus ring via tokens) holds the chips inline, the filter input flowing
   after them, and the clear-all/caret indicators on the right edge. The
   inner input is borderless — the shell carries border and focus ring.

   Every inner size is em-based, like --wa-form-control-height itself, so
   the shell matches a wa-input of the same size: the root's wa-size-*
   class sets font-size and the whole control follows. Anything in rem or
   absolute tokens here would break that at sizes other than medium. */
.multi-select-control {
  display: flex;
  align-items: center;
  gap: 0.25em;
  min-height: var(--wa-form-control-height);
  padding-block: 0.125em;
  padding-inline: 0.5em;
  background-color: var(--wa-form-control-background-color);
  border: var(--wa-form-control-border-width) var(--wa-form-control-border-style) var(--wa-form-control-border-color);
  border-radius: var(--wa-form-control-border-radius);
  outline: var(--wa-focus-ring-style) var(--wa-focus-ring-width) transparent;
  outline-offset: var(--wa-focus-ring-offset);
  transition: outline-color var(--wa-transition-fast) var(--wa-transition-easing);
  cursor: text;

  &:focus-within {
    outline-color: var(--wa-color-focus);
  }

  &:has(input:disabled) {
    opacity: 0.5;
    cursor: not-allowed;
  }
}

.multi-select-items {
  flex: 1 1 auto;
  display: flex;
  /* chips wrap by default — the control grows */
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25em;
  min-width: 0;

  input {
    flex: 1 1 8ch;
    width: auto;
    min-width: 8ch;
    height: auto;
    padding: 0;
    background: none;
    border: none;
    outline: none;
  }
}

.multi-select-chip {
  display: inline-flex;
  max-width: 100%;
}

/* our display declarations would otherwise beat the UA's [hidden] rule */
.multi-select-chip[hidden],
.multi-select-summary[hidden],
.multi-select-indicator[hidden] {
  display: none;
}

/* collapse_after: the collapsed control stays single-line; chips beyond N
   carry [hidden] and the +K pill stands in for them. */
.multi-select-control[data-collapsed] .multi-select-items {
  flex-wrap: nowrap;
  overflow: hidden;
}

.multi-select-summary {
  flex: 0 0 auto;
  margin: 0;
  /* native.css sizes every button to --wa-form-control-height — the full
     height of the shell this one sits inside. Content-sized instead. */
  block-size: auto;
  padding: 0.125em 0.5em;
  font: inherit;
  font-size: var(--wa-font-size-smaller);
  line-height: var(--wa-line-height-condensed);
  color: var(--wa-color-text-quiet);
  background: var(--wa-color-neutral-fill-quiet);
  border: none;
  border-radius: var(--wa-border-radius-pill);
  cursor: pointer;

  &:hover {
    background: var(--wa-color-neutral-fill-normal);
  }

  &:focus-visible {
    outline: var(--wa-focus-ring);
    outline-offset: var(--wa-focus-ring-offset);
  }
}

.multi-select-indicators {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.125em;
  color: var(--wa-color-text-quiet);
}

/* Modelled on wa-select's own clear/expand buttons: a fixed em-square box
   so the glyphs stay on one trailing axis whatever their intrinsic width. */
.multi-select-indicator {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 1.5em;
  block-size: 1.5em;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  border-radius: var(--wa-border-radius-s);
  cursor: pointer;

  &:hover {
    color: var(--wa-color-text-loud);
  }

  &:focus-visible {
    outline: var(--wa-focus-ring);
    outline-offset: var(--wa-focus-ring-offset);
  }
}

/* Selected options stay listed with a visible checkmark. */
.multi-select .combobox-option {
  display: flex;
  align-items: center;
  gap: var(--wa-space-s);
}

.multi-select-check {
  margin-inline-start: auto;
  visibility: hidden;

  .combobox-option[aria-selected="true"] & {
    visibility: visible;
  }
}