/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a795c5b | Cube Dev Team */
import { DIRECTIONS, filterMods, parseStyle } from "../utils/styles.js";

//#region src/tasty/styles/fade.ts
const DIRECTION_MAP = {
	right: "to left",
	left: "to right",
	top: "to bottom",
	bottom: "to top"
};
const DEFAULT_TRANSPARENT_COLOR = "rgb(0 0 0 / 0)";
const DEFAULT_OPAQUE_COLOR = "rgb(0 0 0 / 1)";
/**
* Process a single group and return gradient strings for its directions.
*/
function processGroup(group, isOnlyGroup) {
	let { values, mods, colors } = group;
	let directions = filterMods(mods, DIRECTIONS);
	if (!values.length) values = ["calc(2 * var(--gap))"];
	if (!directions.length) if (isOnlyGroup) directions = [
		"top",
		"right",
		"bottom",
		"left"
	];
	else return [];
	const transparentColor = colors?.[0] || DEFAULT_TRANSPARENT_COLOR;
	const opaqueColor = colors?.[1] || DEFAULT_OPAQUE_COLOR;
	return directions.map((direction, index) => {
		const size = values[index] || values[index % 2] || values[0];
		return `linear-gradient(${DIRECTION_MAP[direction]}, ${transparentColor} 0%, ${opaqueColor} ${size})`;
	});
}
function fadeStyle({ fade }) {
	if (!fade) return;
	const groups = parseStyle(fade).groups ?? [];
	if (!groups.length) return;
	const isOnlyGroup = groups.length === 1;
	const gradients = [];
	for (const group of groups) {
		const groupGradients = processGroup({
			values: group.values ?? [],
			mods: group.mods ?? [],
			colors: group.colors ?? []
		}, isOnlyGroup);
		gradients.push(...groupGradients);
	}
	if (!gradients.length) return;
	return {
		mask: gradients.join(", "),
		"mask-composite": "intersect"
	};
}
fadeStyle.__lookupStyles = ["fade"];

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