@import "../variables";
@import "../globals";

.spinner.heart {
	animation: heart-animate $speed2x ease-in-out infinite;

	&::before {
		border-radius: $spinner-size/4 $spinner-size/4 0 0;
		content: " ";
		@include display-box-wh($spinner-size / 2, $spinner-size / 4 * 3 - 1);
		background-color: $spinner-color;
		transform: rotate(-45deg);
		position: absolute;
		top: 0;
		left: $spinner-size / 6;
	}

	&::after {
		border-radius: $spinner-size / 4 $spinner-size / 4 0 0;
		content: " ";
		@include display-box-wh($spinner-size / 2, $spinner-size / 4 * 3 - 1);
		background-color: $spinner-color;
		transform: rotate(45deg);
		position: absolute;
		top: 0;
		right: $spinner-size / 6;
	}
}

@keyframes heart-animate {
	0% {
		transform: scale(.9);
		transform-origin: center;
	}

	15% {
		transform: scale(1.4);
		transform-origin: center;
	}

	30% {
		transform: scale(.9);
		transform-origin: center;
	}

	45% {
		transform: scale(1.4);
		transform-origin: center;
	}

	60%, 100% {
		transform: scale(.9);
		transform-origin: center;
	}
}