.b24-hover-pill {
	--b24-hover-pill-content-pl: 2px;
	--b24-hover-pill-content-pr: 10px;
	--hover-color: var(--ui-color-accent-soft-blue-3);

	position: relative;
	min-width: 0;
	max-width: 100%;
	width: -webkit-max-content;
	width: max-content;
	border-radius: var(--ui-border-radius-pill);
}

.b24-hover-pill.--alert {
	--hover-color: var(--ui-color-accent-soft-red-3);
}

.b24-hover-pill:not(.--readonly) {
	cursor: pointer;
}

.b24-hover-pill:not(.--readonly):hover,
.b24-hover-pill:not(.--readonly).--active {
	/*box-shadow: 0 0 0 2px var(--hover-color);*/
	background: var(--hover-color);
}

.b24-hover-pill:focus-visible {
	outline: 2px solid var(--ui-color-design-outline-a1-content-divider);
}

.b24-hover-pill.--readonly:focus-visible {
	outline: none;
}

.b24-hover-pill.--text-only:not(.--no-offset) {
	margin-left: -10px;
}

.b24-hover-pill-content {
	overflow: hidden;
	display: flex;
	align-items: center;
	padding: var(--ui-space-stack-3xs) var(--b24-hover-pill-content-pr) var(--ui-space-stack-3xs) var(--b24-hover-pill-content-pl);
}

.b24-hover-pill.--text-only {
	--b24-hover-pill-content-pl: 10px;
}

.b24-hover-pill.--compact {
	--b24-hover-pill-content-pl: 2px;
	--b24-hover-pill-content-pr: 2px;
}

/* remover */
.b24-hover-pill-remover {
	position: absolute;
	right: -12px;
	top: -5px;
	padding: 2px;
	border-radius: var(--ui-border-radius-pill);
	border: 1px solid var(--ui-color-base-7);
	background: var(--ui-color-base-8);
	box-shadow: 0 1px 1px rgba(var(--ui-color-palette-black-solid-rgb), 0.03);
	line-height: 0;
	opacity: 0;
	cursor: pointer;
}

.b24-hover-pill:hover .b24-hover-pill-remover {
	opacity: 1;
}

.b24-hover-pill-remover .ui-icon-set {
	--ui-icon-set__icon-color: var(--ui-color-base-3);
	--ui-icon-set__icon-size: 16px;
}

.b24-hover-pill-remover:hover .ui-icon-set {
	--ui-icon-set__icon-color: var(--ui-color-base-2);
}