.cx-reactions {
	--cx-border: color-mix(in srgb, var(--wp--preset--color--contrast, #111) 18%, transparent);
	--cx-mine: color-mix(in srgb, var(--wp--preset--color--contrast, #111) 10%, transparent);
	margin-block: 0.75rem 0;
	font-size: 0.9rem;
}

.cx-reactions--post {
	margin-block-start: 2.5rem;
	padding-block-start: 1rem;
	border-top: 1px solid var(--cx-border);
}

.cx-reactions:empty {
	display: none;
}

.cx-reactions.is-busy {
	opacity: 0.6;
	pointer-events: none;
}

.cx-reactions__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
}

.cx-reactions__chip,
.cx-reactions__add {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	min-height: 2rem;
	padding: 0.15rem 0.6rem;
	border: 1px solid var(--cx-border);
	border-radius: 999px;
	background: transparent;
	color: inherit;
	font: inherit;
	line-height: 1;
}

button.cx-reactions__chip,
.cx-reactions__add,
.cx-reactions__pick {
	cursor: pointer;
}

.cx-reactions__chip.is-mine {
	background: var(--cx-mine);
	border-color: currentColor;
}

.cx-reactions__emoji {
	font-size: 1.05rem;
}

.cx-reactions__add {
	opacity: 0.75;
}

.cx-reactions__add:hover,
.cx-reactions__add[aria-expanded="true"] {
	opacity: 1;
}

.cx-reactions__add-wrap {
	position: relative;
}

.cx-reactions__picker {
	position: absolute;
	z-index: 20;
	bottom: calc(100% + 0.4rem);
	left: 0;
	display: flex;
	gap: 0.15rem;
	padding: 0.3rem;
	border: 1px solid var(--cx-border);
	border-radius: 999px;
	background: var(--wp--preset--color--base, #fff);
	box-shadow: 0 4px 16px rgb(0 0 0 / 0.15);
}

.cx-reactions__picker[hidden] {
	display: none;
}

.cx-reactions__pick {
	width: 2.4rem;
	height: 2.4rem;
	border: 0;
	border-radius: 50%;
	background: transparent;
	font-size: 1.35rem;
	line-height: 1;
}

.cx-reactions__pick:hover,
.cx-reactions__pick:focus-visible,
.cx-reactions__pick.is-mine {
	background: var(--cx-mine);
}