.rc-like {
	--rc-like-ink: #333;
	--rc-like-accent: #d92c3f;
	--rc-like-size: 63.5px;
	--rc-like-icon: 27px;
	--rc-like-font-size: 30px;

	display: flex;
	align-items: center;
	gap: 26px;
}

.rc-like__button {
	flex: none;
	min-width: 0;
	min-height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: var(--rc-like-size);
	height: var(--rc-like-size);
	padding: 0;
	margin: 0;
	border: 3px solid var(--rc-like-ink);
	border-radius: 99px;
	background: transparent;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: background-color .2s ease, border-color .2s ease;
}

.rc-like__button:focus-visible { outline: 3px solid var(--rc-like-accent); outline-offset: 4px; }

.rc-like__icon {
	display: block;
	width: var(--rc-like-icon);
	height: var(--rc-like-icon);
	max-width: none;
}
.rc-like__icon--on { display: none; }

.rc-like.is-liked .rc-like__button {
	background: var(--rc-like-accent);
	border-color: var(--rc-like-accent);
}
.rc-like.is-liked .rc-like__icon--off { display: none; }
.rc-like.is-liked .rc-like__icon--on { display: block; }

.rc-like.is-popping .rc-like__icon--on { animation: rc-like-pop .35s ease; }
@keyframes rc-like-pop {
	0% { transform: scale(.6); }
	60% { transform: scale(1.25); }
	100% { transform: scale(1); }
}

.rc-like__label {
	margin: 0;
	padding: 0;
	font-family: "Afacad", sans-serif;
	font-weight: 500;
	font-size: var(--rc-like-font-size);
	line-height: normal;
	color: var(--rc-like-ink);
}

@media (max-width: 767px) {
	.rc-like {
		--rc-like-size: 52px;
		--rc-like-icon: 22px;
		--rc-like-font-size: 22px;
		gap: 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rc-like__button, .rc-like__icon { transition: none; animation: none !important; }
}