.chipWrapper {
	display: flex;
	flex-direction: row;
	width: fit-content;
	margin-right: var(--sp-base) / 2;
	height: 100%;
}

.chipWrapper > button {
	display: inline-flex;
	width: 20px;
	border: none;
	padding: 0px;
	flex-direction: row;
	justify-content: center;
	vertical-align: top;
	font-size: inherit;
}

.chipWrapper[data-staged-for-deletion] {
	background: red;
	box-shadow: 0px 0px 5px 2px red;
}

.chipWrapperButton {
	background: var(--color-primary);
	color: var(--color-primary-text);
}

.chipNegateButton {
	composes: chipWrapperButton;
	border-radius: var(--radius-default) 0 0 var(--radius-default);
}

.chipDeleteButton {
	composes: chipWrapperButton;
	border-radius: 0 var(--radius-default) var(--radius-default) 0;
}

.chipBody {
	margin-left: 2px;
	margin-right: 2px;
	padding: 0 5px 0 5px;
	background: var(--color-primary);
	color: var(--color-primary-text);
	display: flex;
	flex-direction: row;
	align-items: center;
}

.chipBody input,
.chipBody select {
	color: currentColor;
}

.chipName {
	font-weight: bold;
}

.chipName:after {
	content: ':';
}