@import '../../../../constants/colors.scss';

.heartContainer {
	position: relative;
	width: 25px;
	height: 25px;
	transition: 0.3s;
	margin: 0 10px;

	.checkbox {
		position: absolute;
		width: 100%;
		height: 100%;
		opacity: 0;
		z-index: 20;
		cursor: pointer;
	}

	.svgContainer {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;

		.svgOutline,
		.svgFilled {
			fill: $primary-violet;
			position: absolute;
		}

		.svgFilled {
			animation: svgFilled 1s;
			display: none;
		}

		.svgCelebrate {
			position: absolute;
			animation: svgCelebrate 0.5s;
			animation-fill-mode: forwards;
			display: none;
			stroke: $primary-violet;
			fill: $primary-violet;
			stroke-width: 2px;
		}
	}

	.checkbox:checked ~ .svgContainer .svgFilled {
		display: block;
	}

	.checkbox:checked ~ .svgContainer .svgCelebrate {
		display: block;
	}
}

@keyframes svgFilled {
	0% {
		transform: scale(0);
	}

	25% {
		transform: scale(1.2);
	}

	50% {
		transform: scale(1);
		filter: brightness(1.5);
	}
}

@keyframes svgCelebrate {
	0% {
		transform: scale(0);
	}

	50% {
		opacity: 1;
		filter: brightness(1.5);
	}

	100% {
		transform: scale(1.4);
		opacity: 0;
		display: none;
	}
}
