@likeAnimationDuration: 0.5s;
@likeAnimationEasing: cubic-bezier(0.7, 0, 0.3, 1);

.likeButton {
	display: flex;

	align-items: center;
	justify-content: center;

	color: var(--text-color);

	border: none;
	border-radius: 50%;

	width: 1em;
	height: 1em;

	padding: 0;
	margin: 0;

	z-index: 2;

	transition: all @likeAnimationDuration @likeAnimationEasing;

	background-color: transparent;

	&:before {
		z-index: -1;
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 1em;
		height: 1em;
		border-radius: inherit;
		transition: inherit;
	}

	&:after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 1em;
		height: 1em;
		border-radius: inherit;
		z-index: -1;
	}

	&.liked {
		.heart {
			> path {
				stroke: var(--colorPrimary);
				fill: var(--colorPrimary);
			}

			filter: drop-shadow(0px 0px 2px var(--colorPrimary));
		}
	}

	&.clicked {
		.heart {
			animation: heart-bounce @likeAnimationDuration @likeAnimationEasing;

			@keyframes heart-bounce {
				40% {
					transform: scale(0.7);
				}

				0%,
				80%,
				100% {
					transform: scale(1);
				}
			}
		}
	}

	&.disabled {
		pointer-events: none;
		opacity: 0.5;
	}

	.heart {
		position: relative;

		cursor: pointer;

		> path {
			stroke-width: 2;
			transition: fill @likeAnimationDuration @likeAnimationEasing;
			stroke: currentColor;
			fill: transparent;
		}

		animation: none;

		width: 1em;
		height: 1em;

		margin: 0;

		transition: all @likeAnimationDuration @likeAnimationEasing;
	}

	.ripple {
		position: absolute;

		height: 1em;
		width: 1em;

		border-radius: 50%;
		overflow: hidden;

		z-index: 1;

		&:before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			border: 0.4em solid var(--colorPrimary);
			border-radius: inherit;
			transform: scale(0);
		}
	}
}

@keyframes ripple-out {
	from {
		transform: scale(0);
	}

	to {
		transform: scale(5);
	}
}

@keyframes depress {
	from,
	to {
		transform: none;
	}

	50% {
		transform: translateY(5%) scale(0.9);
	}
}

@keyframes depress-shadow {
	from,
	to {
		transform: none;
	}

	50% {
		transform: scale(0.5);
	}
}
