<form data-reaction id="app">
	<label>
		<input type="checkbox" name="reaction-heart" value="75" />
		<svg viewBox="0 0 24 24">
			<g><path d="M21.179 12.794l.013.014L12 22l-9.192-9.192.013-.014A6.5 6.5 0 0112 3.64a6.5 6.5 0 019.179 9.154zM4.575 5.383a4.5 4.5 0 000 6.364L12 19.172l7.425-7.425a4.5 4.5 0 10-6.364-6.364L8.818 9.626 7.404 8.21l3.162-3.162a4.5 4.5 0 00-5.99.334l-.001.001z"></path></g>
			<g><path d="M2.821 12.794a6.5 6.5 0 017.413-10.24h-.002L5.99 6.798l1.414 1.414 4.242-4.242a6.5 6.5 0 019.193 9.192L12 22l-9.192-9.192.013-.014z"></path></g>
		</svg>
		<span>75</span>
	</label>
	<label>
		<input type="checkbox" name="reaction-unicorn" value="67" />
		<svg viewBox="0 0 24 24">
			<g><path d="M5.645 8.013c.013-.265-.261-.323-.4-.183-1.16 1.17-1.822 3.865-.344 7.32.294.961 1.938 3.19.84 6.131l-.003.006c-.094.255.206.404.366.263 1.395-1.226 1.933-3.593 1.1-6.375-.488-1.657-1.955-4.226-1.559-7.162zm-3.22 2.738c.05-.137-.124-.417-.326-.225-.939.893-1.316 2.863-.976 4.605.547 2.878 2.374 3.526 2.066 6.629-.028.102.176.38.348.154 1.546-2.033.409-4.453-.241-6.006-1.005-2.386-1.087-4.118-.871-5.157z"></path>
				<path d="M13.622 7.223l8.579-3.68c.598-.256 1.087.547.6.985l-6.618 5.941c.881 2.043 2.738 6.34 2.931 6.775 1.348 3.031-2.055 4.918-3.807 3.583a7.027 7.027 0 01-.623-.574c-.974-.965-2.419-2.398-5.207-1.877.284-2.115-.313-3.737-.883-5.288-.38-1.032-.747-2.032-.837-3.124-.346-3.329 3.763-8.23 4.696-7.953.386.115.326 1.229.266 2.319-.051.948-.102 1.88.143 2.12.145.142.428.43.76.773zM11.5 16.5l2.5.5 2.5 2 1-.5-2-4.5-1.5-4-1.5-1-1-1-1-1.5L10 8l-.5 1.5 1 2.5 1 4.5z"></path>
			</g>
			<g><path d="M5.645 8.013c.013-.265-.261-.323-.4-.183-1.16 1.17-1.822 3.865-.344 7.32.294.961 1.938 3.19.84 6.131l-.003.006c-.094.255.206.404.366.263 1.395-1.226 1.933-3.593 1.1-6.375-.488-1.657-1.955-4.226-1.559-7.162zm-3.22 2.738c.05-.137-.124-.417-.326-.225-.939.893-1.316 2.863-.976 4.605.547 2.878 2.374 3.526 2.066 6.629-.028.102.176.38.348.154 1.546-2.033.409-4.453-.241-6.006-1.005-2.386-1.087-4.118-.871-5.157zM22.2 3.543l-8.579 3.68c-.332-.343-.615-.63-.76-.773-.527-.517.313-4.224-.409-4.439-.933-.277-5.042 4.624-4.696 7.953.224 2.735 2.193 4.89 1.72 8.412 3.446-.644 4.841 1.697 5.83 2.45 1.752 1.335 5.155-.551 3.807-3.582-.193-.435-2.05-4.732-2.931-6.775l6.619-5.94c.486-.44-.003-1.242-.601-.986zm-9.418 9.535a.828.828 0 01-.74-.9.825.825 0 01.81-.76c.479 0 .85.42.81.903a.824.824 0 01-.88.757z"></path></g>
		</svg>
		<span>67</span>
	</label>
	<label>
		<input type="checkbox" name="reaction-bookmark" value="150" />
		<svg viewBox="0 0 24 24">
			<g><path d="M5 2h14a1 1 0 011 1v19.143a.5.5 0 01-.766.424L12 18.03l-7.234 4.536A.5.5 0 014 22.143V3a1 1 0 011-1zm13 2H6v15.432l6-3.761 6 3.761V4z"></path></g>
			<g><path d="M5 2h14a1 1 0 011 1v19.143a.5.5 0 01-.766.424L12 18.03l-7.234 4.536A.5.5 0 014 22.143V3a1 1 0 011-1z"></path></g>
		</svg>
		<span>150</span>
	</label>
</form>

body {
	margin: 0;
  -webkit-tap-highlight-color: transparent;
}
[data-reaction] {
	--reaction-bgc: transparent;
	--reaction-c: #363d44;
	--reaction-border: transparent;

	background-color: #eef0f1;
	display: inline-flex;
	flex-direction: column;
	font-family: ui-sans-serif, system-ui, sans-serif;
	padding: 2rem;
}
[data-reaction] label {
	margin-block-end: 2rem;
	text-align: center;
}
[data-reaction] span {
	color: var(--reaction-c);
	display: block;
	font-size: 0.875rem;
}
[data-reaction] svg {
	background-color: var(--reaction-bgc);
	border-radius: 50%;
	box-shadow: inset 0 0 0 2px var(--reaction-bdc);
	box-sizing: border-box;
	fill: var(--reaction-c);
	height: 2.5rem;
	padding: 0.5rem;
	transition: all .3s ease-in-out;
	width: 2.5rem;
}
[name^="reaction-"] {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	left: 0;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* STATE */
[name="reaction-heart"]:checked ~ * {
	--reaction-bgc: rgb(220 24 24 / 10%);
	--reaction-c: #dc1818;
}
[name="reaction-unicorn"]:checked ~ * {
	--reaction-bgc: rgb(38 217 202 / 10%);
	--reaction-c: #26d9ca;
}
[name="reaction-bookmark"]:checked ~ * {
	--reaction-bgc: rgb(59 73 223 / 10%);
	--reaction-c: #3b49df;
}
[name*="reaction-"]:checked + svg {
	--reaction-bdc: var(--reaction-c);
}
[name*="reaction-"]:checked + svg g:first-of-type,
[name*="reaction-"]:not(:checked) + svg g:last-of-type {
	opacity: 0;
}
[name*="reaction-"]:checked + svg g:last-of-type {
	opacity: 1;
}

@media (hover: hover) {
	[name="reaction-heart"] + svg:hover {
		--reaction-bgc: rgb(220 24 24 / 10%);
		--reaction-c: #dc1818;
	}
	[name="reaction-unicorn"] + svg:hover {
		--reaction-bgc: rgb(38 217 202 / 10%);
		--reaction-c: #26d9ca;
	}
	[name="reaction-bookmark"] + svg:hover {
		--reaction-bgc: rgb(59 73 223 / 10%);
		--reaction-c: #3b49df;
	}
}

app.addEventListener('change', (e) => {
	const t = e.target;
	t.parentNode.lastElementChild.innerText = t.value = t.value - 0 + (t.checked ? 1 : -1);
});