.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.chip-list-item {
  display: inline-flex;
  max-width: 100%;
}

/* ChipList#more: a row's overflow behind a "+N more" chip. Opened, the
   folded chips flow on in the same wrapping row instead of dropping to a
   line of their own. The fold sets how its list displays, as
   .disclosure sets --open, so the list stays hidden until it opens. */
.chip-list-more {
  display: inline-flex;
  max-width: 100%;
}

.chip-list-fold {
  --chip-list-folded-display: none;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  max-width: 100%;
}

.chip-list-fold[open] {
  --chip-list-folded-display: contents;
}

.chip-list-folded {
  display: var(--chip-list-folded-display);
}

.chip-list-more-toggle {
  list-style: none;
  cursor: pointer;
}

.chip-list-more-toggle::-webkit-details-marker {
  display: none;
}