.cx-many-to-many { position: relative; min-width: 0; }
.cx-many-to-many-control { position: relative; min-width: 0; padding: var(--cx-space-2); background: var(--cx-color-surface); border: 1px solid var(--cx-color-border-strong); border-radius: var(--cx-radius-md); }
.cx-many-to-many-selected { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cx-space-1); min-width: 0; margin: 0; padding: 0; list-style: none; }
.cx-many-to-many-selected:empty { display: none; }
.cx-many-to-many-chip { display: inline-flex; align-items: center; gap: var(--cx-space-1); max-width: 100%; min-height: var(--cx-space-6); padding-inline-start: var(--cx-space-2); color: var(--cx-color-primary); background: var(--cx-color-primary-soft); border: 1px solid transparent; border-radius: var(--cx-radius-sm); font-size: var(--cx-font-size-xs); font-weight: var(--cx-font-weight-medium); }
.cx-many-to-many-chip-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-many-to-many-chip-remove { display: inline-flex; align-items: center; justify-content: center; width: var(--cx-space-6); height: var(--cx-space-6); padding: 0; color: var(--cx-color-text-muted); background: transparent; border: 0; border-radius: var(--cx-radius-sm); font: inherit; font-size: var(--cx-font-size-md); cursor: pointer; }
.cx-many-to-many-chip-remove:hover { color: var(--cx-color-text); background: var(--cx-color-border); }
.cx-many-to-many-chip-remove:focus-visible { outline: 2px solid var(--cx-color-primary); outline-offset: var(--cx-space-1); }
.cx-many-to-many-input:focus-visible { outline: none; }
.cx-many-to-many-control:focus-within { border-color: var(--cx-color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cx-color-primary) 16%, transparent); }
.cx-many-to-many-input { box-sizing: border-box; width: 100%; min-width: 0; min-height: var(--cx-space-8); margin-block-start: var(--cx-space-1); padding: var(--cx-space-1) var(--cx-space-2); color: var(--cx-color-text); background: transparent; border: 0; border-block-end: 1px solid var(--cx-color-border); border-radius: 0; font: inherit; font-size: var(--cx-font-size-sm); }
.cx-many-to-many-dropdown { position: absolute; z-index: var(--cx-z-dropdown); inset-inline: 0; inset-block-start: calc(100% + var(--cx-space-1)); max-height: min(40vh, 20rem); overflow-y: auto; color: var(--cx-color-text); background: var(--cx-color-surface); border: 1px solid var(--cx-color-border-strong); border-radius: var(--cx-radius-md); box-shadow: var(--cx-shadow-md); }
.cx-many-to-many-dropdown[hidden] { display: none; }
.cx-many-to-many-option { padding: var(--cx-space-2) var(--cx-space-3); color: var(--cx-color-text); font-size: var(--cx-font-size-sm); cursor: pointer; }
.cx-many-to-many-option:hover { background: var(--cx-color-surface-muted); }
.cx-many-to-many-option--active { color: var(--cx-color-primary); background: var(--cx-color-primary-soft); font-weight: var(--cx-font-weight-medium); }
.cx-many-to-many-status { min-height: 0; color: var(--cx-color-text-muted); font-size: var(--cx-font-size-xs); }
.cx-many-to-many-status:not(:empty) { padding-block-start: var(--cx-space-1); }
.cx-many-to-many--invalid .cx-many-to-many-control, .cx-many-to-many-control[aria-invalid="true"] { border-color: var(--cx-color-danger); }
.cx-many-to-many[data-cx-many-to-many-readonly="true"] .cx-many-to-many-control { background: var(--cx-color-surface-muted); }
.cx-many-to-many[data-cx-many-to-many-disabled="true"] { color: var(--cx-color-text-subtle); opacity: 0.75; }
.cx-form-grid > .cx-many-to-many.cx-field--span-2 { grid-column: span 2; }
.cx-form-grid > .cx-many-to-many.cx-field--span-3 { grid-column: span 3; }
.cx-record-form .cx-record-group-content > .cx-many-to-many { display: grid; grid-template-columns: minmax(7rem, 10rem) minmax(0, 1fr); align-items: start; gap: var(--cx-space-2) var(--cx-space-3); }
.cx-record-form .cx-record-group-content > .cx-many-to-many > .cx-many-to-many-label { margin-block: var(--cx-space-1) 0; color: var(--cx-color-text-muted); }
.cx-record-form .cx-record-group-content > .cx-many-to-many > .cx-many-to-many-control, .cx-record-form .cx-record-group-content > .cx-many-to-many > .cx-field-help, .cx-record-form .cx-record-group-content > .cx-many-to-many > .cx-many-to-many-validation { grid-column: 2; }
@media (max-width: 48rem) { .cx-form-grid > .cx-many-to-many.cx-field--span-2, .cx-form-grid > .cx-many-to-many.cx-field--span-3 { grid-column: span 1; } .cx-record-form .cx-record-group-content > .cx-many-to-many { display: block; } .cx-record-form .cx-record-group-content > .cx-many-to-many > .cx-many-to-many-label { margin-block: 0 var(--cx-space-1); } }