.c-trademark {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	transition: color 150ms linear;
}


.c-trademark__text {
	display: flex;
	align-items: center;
	margin-right: 7px;
}


.c-trademark__love {
	display: inline-flex;
	background-image: url(/img/heart-sprite.png);
	background-position: right 1px;
	background-repeat: no-repeat;
	background-size: 2900%;
	cursor: pointer;
	width: space(7);
	height: space(7);
	margin: 0 space(-1.5);
}


// On hover do some animating ;-)
.c-trademark:hover {
	color: #E2264D; // same color as heart image

	& .komma-emblem {
		transform-origin: 12px 12px;
		animation: logo-spin 1.8s linear infinite;
	}

	& .c-trademark__love {
		animation: heartAnim 1.1s steps(28) forwards;
	}
}


@keyframes heartAnim {
	from {
		background-position: left 1px;
	}
	to {
		background-position: right 1px;
	}
}


@keyframes logo-spin {
	from { transform: rotate(0); }
	to { transform: rotate(-1turn); }
}