wiki.techinc.nl/resources/lib/codex/modules/CdxChipInput.css

.cdx-input-chip{background-color:var(--background-color-interactive-subtle, #f8f9fa);color:var(--color-base, #202122);display:inline-flex;align-items:center;justify-content:center;gap:4px;max-width:32rem;border:1px solid var(--border-color-subtle, #c8ccd1);border-radius:9999px;padding:0 0 0 8px;font-size:.875rem;line-height:1.5714285}.cdx-input-chip:not(.cdx-input-chip--disabled){transition-property:background-color,color,border-color,box-shadow;transition-duration:.25s}.cdx-input-chip:not(.cdx-input-chip--disabled):hover{background-color:var(--background-color-base, #fff);cursor:pointer}.cdx-input-chip:not(.cdx-input-chip--disabled):focus{outline:1px solid transparent}.cdx-input-chip:not(.cdx-input-chip--disabled):active{background-color:var(--background-color-interactive, #eaecf0);border-color:var(--border-color-interactive, #72777d)}.cdx-input-chip:not(.cdx-input-chip--disabled):focus:not(:active){border-color:var(--border-color-progressive--focus, #36c);box-shadow:inset 0 0 0 1px var(--box-shadow-color-progressive--focus, #36c)}.cdx-input-chip--disabled{background-color:var(--background-color-disabled, #c8ccd1);color:var(--color-inverted, #fff);border-color:var(--border-color-transparent, transparent)}.cdx-input-chip--disabled .cdx-icon{color:var(--color-inverted, #fff)}.cdx-input-chip__text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cdx-input-chip__button.cdx-button{min-width:20px;min-height:20px;margin-right:1px;border-radius:9999px;padding-right:2px;padding-left:2px;font-size:.75rem}.cdx-chip-input__chips,.cdx-chip-input__separate-input{box-sizing:border-box;min-width:256px;min-height:32px;border-width:1px;border-style:solid;border-radius:2px;padding:3px 8px;line-height:1.4285714}.cdx-chip-input__chips{display:flex;flex:1 auto;flex-flow:wrap;gap:8px}.cdx-chip-input__input{color:var(--color-base, #202122);flex-grow:inherit;border:0;font-family:inherit;font-size:inherit;line-height:1}.cdx-chip-input__input:focus{outline:1px solid transparent}.cdx-chip-input__input::placeholder{color:var(--color-placeholder, #72777d);opacity:1}.cdx-chip-input--has-separate-input .cdx-chip-input__chips{margin-bottom:-1px;border-bottom-left-radius:0;border-bottom-right-radius:0}.cdx-chip-input--has-separate-input .cdx-chip-input__separate-input{border-top-left-radius:0;border-top-right-radius:0}.cdx-chip-input:not(.cdx-chip-input--disabled) .cdx-chip-input__chips,.cdx-chip-input:not(.cdx-chip-input--disabled) .cdx-chip-input__separate-input{border-color:var(--border-color-base, #a2a9b1);box-shadow:inset 0 0 0 1px var(--box-shadow-color-transparent, transparent);transition-property:background-color,color,border-color,box-shadow;transition-duration:.25s}.cdx-chip-input:not(.cdx-chip-input--disabled) .cdx-chip-input__chips .cdx-chip-input__input,.cdx-chip-input:not(.cdx-chip-input--disabled) .cdx-chip-input__separate-input .cdx-chip-input__input{background-color:var(--background-color-base, #fff)}.cdx-chip-input:not(.cdx-chip-input--disabled) .cdx-chip-input__separate-input{background-color:var(--background-color-base, #fff)}.cdx-chip-input:not(.cdx-chip-input--disabled):not(.cdx-chip-input--has-separate-input) .cdx-chip-input__chips{background-color:var(--background-color-base, #fff)}.cdx-chip-input:not(.cdx-chip-input--disabled).cdx-chip-input--has-separate-input .cdx-chip-input__chips{background-color:var(--background-color-interactive-subtle, #f8f9fa)}.cdx-chip-input:not(.cdx-chip-input--disabled):not(.cdx-chip-input--has-separate-input) .cdx-chip-input__chips:hover,.cdx-chip-input:not(.cdx-chip-input--disabled).cdx-chip-input--has-separate-input .cdx-chip-input__separate-input:hover{border-color:var(--border-color-interactive, #72777d)}.cdx-chip-input:not(.cdx-chip-input--disabled).cdx-chip-input--focused:not(.cdx-chip-input--has-separate-input) .cdx-chip-input__chips,.cdx-chip-input:not(.cdx-chip-input--disabled).cdx-chip-input--focused.cdx-chip-input--has-separate-input .cdx-chip-input__separate-input{border-color:var(--border-color-progressive--focus, #36c);box-shadow:inset 0 0 0 1px var(--box-shadow-color-progressive--focus, #36c);outline:1px solid transparent}.cdx-chip-input:not(.cdx-chip-input--disabled).cdx-chip-input--status-error:not(.cdx-chip-input--focused):not(.cdx-chip-input--has-separate-input) .cdx-chip-input__chips,.cdx-chip-input:not(.cdx-chip-input--disabled).cdx-chip-input--status-error:not(.cdx-chip-input--focused).cdx-chip-input--has-separate-input .cdx-chip-input__separate-input{color:var(--color-error, #d73333);border-color:var(--border-color-error, #b32424)}.cdx-chip-input:not(.cdx-chip-input--disabled).cdx-chip-input--status-error:not(.cdx-chip-input--focused):not(.cdx-chip-input--has-separate-input) .cdx-chip-input__chips:hover,.cdx-chip-input:not(.cdx-chip-input--disabled).cdx-chip-input--status-error:not(.cdx-chip-input--focused).cdx-chip-input--has-separate-input .cdx-chip-input__separate-input:hover{border-color:var(--border-color-error--hover, #ff4242)}.cdx-chip-input--disabled .cdx-chip-input__chips,.cdx-chip-input--disabled .cdx-chip-input__separate-input{background-color:var(--background-color-disabled-subtle, #eaecf0);border-color:var(--border-color-disabled, #c8ccd1)}.cdx-chip-input--disabled .cdx-chip-input__chips .cdx-chip-input__input,.cdx-chip-input--disabled .cdx-chip-input__separate-input .cdx-chip-input__input{color:var(--color-disabled, #72777d);-webkit-text-fill-color:var(--color-disabled, #72777d)}