.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: flex;
	align-items: center;
	justify-content: center;
	margin: -3px space(1) 0;
	animation: heartbeat 1.8s infinite;
	width: 16px;
	height: 16px;

	svg {
		width: 100%;
		height: 100%;
	}
}


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

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

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


@keyframes heartbeat {
	0% { transform: scale( .75 ); }
	20% { transform: scale( 1 ); }
	40% { transform: scale( .75 ); }
	60% { transform: scale( 1 ); }
	80% { transform: scale( .75 ); }
	100% { transform: scale( .75 ); }
}