/* ============================================
   Chip group — selection container for chips.

   <xm-chip-group> lays slotted <xm-chip> children in a wrapping
   row and owns selection (single by default, multi with `multiple`).
   Layout only — the chips own all chrome. Sits on a surface* host,
   so it adds no surface of its own.
   ============================================ */

.chip-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  /* The group sits on a surface* host; establish on-surface as the
     inherited ink so any chip that resolves currentColor against the
     group reads correctly on the desk (AD-13). */
  color: var(--md-sys-color-on-surface);
}

.chip-group__overflow {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  height: 28px;
  padding: 0 var(--s-3);
  border: 1px dashed var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-full);
  background: transparent;
  color: var(--md-sys-color-primary);
  font-family: var(--md-sys-typescale-label-medium-font);
  font-size: var(--md-sys-typescale-label-medium-size);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition:
    border-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),
    background var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}
.chip-group__overflow:hover {
  border-color: var(--md-sys-color-primary);
  background: color-mix(
    in oklab,
    var(--md-sys-color-on-surface) var(--md-sys-state-hover-state-layer-opacity),
    transparent
  );
}
.chip-group__overflow:focus-visible {
  outline: none;
  box-shadow: var(--xm-state-focus-ring);
}