/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-e694c50 | Cube Dev Team */
import { Block } from "../../Block.js";
import { tasty } from "@tenphi/tasty";
import { jsx, jsxs } from "react/jsx-runtime";

//#region src/components/status/LoadingAnimation/LoadingAnimation.tsx
const CubeElement = tasty({
	as: "img",
	role: "presentation",
	src: "data:image/svg+xml,%3Csvg width='36' height='41' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M35.899 10.351l-18 10.25L.1 10.25l18-10.25L35.9 10.351z' fill='%23FAFAFF'/%3E%3Cpath d='M18 41L0 30.75l.101-20.5L18 20.5' fill='%23E5E5F6'/%3E%3Cpath d='M36 30.75L18 41V20.6l17.899-10.25L36 30.75z' fill='%23C0C0EA'/%3E%3C/svg%3E",
	alt: "",
	styles: {
		display: "block",
		position: "absolute",
		width: "50%",
		height: "50%",
		animationName: {
			"": "none",
			"index=0": "dice0",
			"index=1": "dice1",
			"index=2": "dice2"
		},
		animationDuration: {
			"": "0s",
			"index=0 | index=1 | index=2": "2s"
		},
		animationIterationCount: {
			"": 1,
			"index=0 | index=1 | index=2": "infinite"
		},
		animationTimingFunction: {
			"": "ease",
			"index=0 | index=1 | index=2": "ease"
		},
		zIndex: {
			"": 0,
			"index=0 | index=1 | index=2": 0
		},
		"@keyframes": {
			dice0: {
				from: {
					transform: "translate(49%, 0.5%)",
					zIndex: 0
				},
				"25%": {
					transform: "translate(49%, 0.5%)",
					zIndex: 0
				},
				"50%": {
					transform: "translate(0%, 25%)",
					zIndex: 0
				},
				"51%": { zIndex: 1 },
				"75%": { zIndex: 1 },
				to: {
					transform: "translate(0%, 25%)",
					zIndex: 1
				}
			},
			dice1: {
				from: {
					transform: "translate(0%, 25%)",
					zIndex: 3
				},
				"25%": {
					transform: "translate(49%, 49%)",
					zIndex: 3
				},
				"75%": {
					transform: "translate(49%, 49%)",
					zIndex: 2
				},
				to: {
					transform: "translate(98%, 25%)",
					zIndex: 1
				}
			},
			dice2: {
				from: {
					transform: "translate(98%, 25%)",
					zIndex: 1
				},
				"50%": {
					transform: "translate(98%, 25%)",
					zIndex: 0
				},
				"75%": {
					transform: "translate(49%, 0.5%)",
					zIndex: 0
				},
				to: {
					transform: "translate(49%, 0.5%)",
					zIndex: 0
				}
			}
		}
	}
});
function Cube({ index, style }) {
	return /* @__PURE__ */ jsx(CubeElement, {
		mods: index != null ? { index } : void 0,
		style
	});
}
const SIZE_MAP = {
	small: 32,
	medium: 64,
	large: 96
};
function LoadingAnimation({ size = "medium", ...props }) {
	const numSize = SIZE_MAP[size] || size || SIZE_MAP.medium;
	return /* @__PURE__ */ jsxs(Block, {
		role: "img",
		"aria-label": "Loading animation",
		width: numSize,
		height: numSize * 1.1388888889,
		style: { position: "relative" },
		...props,
		children: [
			/* @__PURE__ */ jsx(Cube, { style: { transform: "translate(0%, 72.5%)" } }),
			/* @__PURE__ */ jsx(Cube, { style: { transform: "translate(98%, 72.5%)" } }),
			/* @__PURE__ */ jsx(Cube, { style: { transform: "translate(49%, 96.5%)" } }),
			/* @__PURE__ */ jsx(Cube, { index: 0 }),
			/* @__PURE__ */ jsx(Cube, { index: 1 }),
			/* @__PURE__ */ jsx(Cube, { index: 2 })
		]
	});
}

//#endregion
export { LoadingAnimation };
//# sourceMappingURL=LoadingAnimation.js.map