frontend/packages/icons/src/OperationIcon/OperationIcon.module.css

.icon {
	flex-shrink: 0;
	overflow: visible;

	& path {
		--motion: none;
		transform-box: fill-box;
		transform-origin: center;
	}
}

.deposit path:nth-child(-n + 2) {
	transform-box: view-box;
	transform-origin: 12px 9px;
	--motion: bank-operation-coin-turn 1000ms ease-in-out both;
}

.repayment path:last-child {
	--motion: bank-operation-ruble-in 1000ms ease-out both;
}

.topup path:last-child {
	--motion: bank-operation-plus-in 900ms ease-out both;
}

.transfer path {
	--shift: 3px;
	--motion: bank-operation-exchange 700ms ease-in-out both;
	&:last-child {
		--shift: -3px;
	}
}

.growth {
	& path:nth-child(2) {
		stroke-dasharray: 1;
		--motion: bank-operation-draw 450ms ease-out both;
	}
	& path:last-child {
		--motion: bank-operation-arrow-rise 350ms ease-out 400ms both;
	}
}

.server {
	& path:nth-child(3) {
		--motion: bank-operation-blink 500ms ease-in-out both;
	}
	& path:nth-child(4) {
		--motion: bank-operation-blink 500ms ease-in-out 220ms both;
	}
}

.basket {
	& path:not(:last-child) {
		--motion: bank-operation-settle 850ms ease-in-out both;
	}
	& path:last-child {
		opacity: 0;
		fill: currentColor;
		--motion: bank-operation-grocery-drop 850ms ease-out both;
	}
}

.wine {
	--motion: bank-operation-cheers 1100ms ease-in-out both;
	transform-origin: 12px 21px;
	& path:nth-child(2) {
		fill: currentColor;
		fill-opacity: 0.2;
		transform-origin: bottom;
		--motion: bank-operation-fill-glass 1100ms ease-out both;
	}
}

.coffee {
	& path:nth-child(3),
	& path:nth-child(4) {
		--motion: bank-operation-steam 1000ms ease-out var(--delay, 0ms) both;
	}
	& path:nth-child(4) {
		--delay: 180ms;
	}
}

.grid path {
	--x: -1.5px;
	--y: -1.5px;
	--turn: 0deg;
	--motion: bank-operation-rearrange 850ms ease-in-out both;
	&:nth-child(2) {
		--x: 1.5px;
		--turn: 90deg;
	}
	&:nth-child(3) {
		--y: 1.5px;
	}
	&:nth-child(4) {
		--x: 1.5px;
		--y: 1.5px;
	}
}

.wifi path {
	--motion: bank-operation-signal 450ms ease-out var(--delay, 0ms) both;
	&:nth-child(1) {
		--delay: 360ms;
	}
	&:nth-child(2) {
		--delay: 240ms;
	}
	&:nth-child(3) {
		--delay: 120ms;
	}
}

.car {
	--motion: bank-operation-drive 1100ms ease-in-out both;
	& path:nth-child(-n + 3) {
		--motion: bank-operation-suspension 275ms ease-in-out 4 both;
	}
	& path:nth-last-child(-n + 2) {
		--motion: bank-operation-wheel-roll 1100ms ease-in-out both;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.icon[data-icon-animating] {
		animation: var(--motion, none);
		& path {
			animation: var(--motion, none);
		}
	}
}

@keyframes :global(bank-operation-coin-turn) {
	0%,
	100% {
		transform: scaleX(1);
	}
	35%,
	65% {
		transform: scaleX(0.12);
	}
	50% {
		transform: scaleX(-1);
	}
}

@keyframes :global(bank-operation-settle) {
	0%,
	30%,
	100% {
		transform: translateY(0);
	}
	45% {
		transform: translateY(1.5px);
	}
	65% {
		transform: translateY(-0.5px);
	}
}

@keyframes :global(bank-operation-ruble-in) {
	0% {
		opacity: 0;
		transform: translateY(-9px) scale(0.7);
	}
	25% {
		opacity: 1;
	}
	65% {
		transform: translateY(0) scale(1.15);
	}
	80% {
		transform: scale(0.95);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes :global(bank-operation-plus-in) {
	0% {
		opacity: 0;
		transform: translateY(-5px) scale(0.5);
	}
	55% {
		opacity: 1;
		transform: translateY(0) scale(1.3);
	}
	75% {
		transform: scale(0.9);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes :global(bank-operation-exchange) {
	0%,
	100% {
		transform: translateX(0);
	}
	45% {
		transform: translateX(var(--shift));
	}
}

@keyframes :global(bank-operation-draw) {
	from {
		stroke-dashoffset: 1;
	}
	to {
		stroke-dashoffset: 0;
	}
}

@keyframes :global(bank-operation-arrow-rise) {
	0%,
	100% {
		transform: translateY(0);
	}
	45% {
		transform: translateY(-2px);
	}
}

@keyframes :global(bank-operation-blink) {
	0%,
	100% {
		stroke-width: 1.6;
	}
	45% {
		stroke: var(--mantine-color-green-6);
		stroke-width: 3;
	}
}

@keyframes :global(bank-operation-grocery-drop) {
	0% {
		opacity: 0;
		transform: translateY(-5px);
	}
	20% {
		opacity: 1;
	}
	55% {
		opacity: 1;
		transform: translateY(7px);
	}
	80%,
	100% {
		opacity: 0;
		transform: translateY(7px);
	}
}

@keyframes :global(bank-operation-fill-glass) {
	0% {
		transform: scaleY(0.05);
	}
	45%,
	75% {
		transform: scaleY(1);
		fill-opacity: 0.5;
	}
	100% {
		transform: scaleY(1);
		fill-opacity: 0.2;
	}
}

@keyframes :global(bank-operation-cheers) {
	0%,
	40%,
	100% {
		transform: rotate(0);
	}
	65% {
		transform: rotate(8deg);
	}
}

@keyframes :global(bank-operation-steam) {
	0% {
		opacity: 0;
		transform: translateY(2px);
	}
	25% {
		opacity: 1;
	}
	70% {
		opacity: 0;
		transform: translateY(-3px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes :global(bank-operation-rearrange) {
	0%,
	100% {
		transform: translate(0, 0) rotate(0);
	}
	50% {
		transform: translate(var(--x), var(--y)) rotate(var(--turn));
	}
}

@keyframes :global(bank-operation-signal) {
	0% {
		opacity: 0.1;
	}
	100% {
		opacity: 1;
	}
}

@keyframes :global(bank-operation-drive) {
	0% {
		opacity: 0;
		transform: translateX(-4px);
	}
	20% {
		opacity: 1;
	}
	80% {
		opacity: 1;
		transform: translateX(3px);
	}
	90% {
		opacity: 0;
		transform: translateX(4px);
	}
	91% {
		opacity: 0;
		transform: translateX(0);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes :global(bank-operation-suspension) {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-0.5px);
	}
}

@keyframes :global(bank-operation-wheel-roll) {
	from {
		transform: rotate(0);
	}
	to {
		transform: rotate(360deg);
	}
}