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

//#region src/tasty/styles/scrollbar.ts
/**
* Creates cross-browser compatible scrollbar styles
*
* Supports both Firefox (scrollbar-width, scrollbar-color) and
* WebKit/Chromium browsers (::-webkit-scrollbar)
*/
function scrollbarStyle({ scrollbar, overflow }) {
	if (!scrollbar && scrollbar !== 0) return;
	const value = scrollbar === true || scrollbar === "" ? "thin" : scrollbar;
	const { mods, colors, values } = parseStyle(String(value)).groups[0] ?? {
		mods: [],
		colors: [],
		values: []
	};
	const style = {};
	const defaultThumbColor = "var(--scrollbar-thumb-color)";
	const defaultTrackColor = "var(--scrollbar-track-color, transparent)";
	style["scrollbar-color"] = `${defaultThumbColor} transparent`;
	const sizeValue = values[0] || "8px";
	if (mods.includes("thin")) style["scrollbar-width"] = "thin";
	else if (mods.includes("none")) {
		style["scrollbar-width"] = "none";
		delete style["scrollbar-color"];
		style["&::-webkit-scrollbar"] = {
			width: "0px",
			height: "0px",
			display: "none"
		};
		return style;
	} else if (mods.includes("auto")) style["scrollbar-width"] = "auto";
	if (mods.includes("stable") || mods.includes("both-edges")) style["scrollbar-gutter"] = mods.includes("both-edges") ? "stable both-edges" : "stable";
	if (sizeValue) style["&::-webkit-scrollbar"] = {
		...style["&::-webkit-scrollbar"] || {},
		width: sizeValue,
		height: sizeValue
	};
	const thumbColor = colors && colors[0] ? colors[0] : defaultThumbColor;
	const trackColor = colors && colors[1] ? colors[1] : defaultTrackColor;
	const cornerColor = colors && colors[2] ? colors[2] : trackColor;
	if (colors && colors.length) {
		style["scrollbar-color"] = `${thumbColor} ${trackColor}`;
		if (!style["&::-webkit-scrollbar"]) style["&::-webkit-scrollbar"] = {};
		style["&::-webkit-scrollbar"]["background"] = trackColor;
		style["&::-webkit-scrollbar-track"] = {
			...style["&::-webkit-scrollbar-track"] || {},
			background: trackColor
		};
		style["&::-webkit-scrollbar-thumb"] = {
			...style["&::-webkit-scrollbar-thumb"] || {},
			background: thumbColor
		};
		style["&::-webkit-scrollbar-corner"] = {
			...style["&::-webkit-scrollbar-corner"] || {},
			background: cornerColor
		};
	}
	if (mods.includes("always")) {
		style["overflow"] = overflow || "scroll";
		if (!style["scrollbar-gutter"]) style["scrollbar-gutter"] = "stable";
		if (!style["&::-webkit-scrollbar"]) style["&::-webkit-scrollbar"] = {};
		style["&::-webkit-scrollbar"]["display"] = "block";
	}
	if (mods.includes("styled")) {
		const baseTransition = [
			"background var(--transition)",
			"border-radius var(--transition)",
			"box-shadow var(--transition)",
			"width var(--transition)",
			"height var(--transition)",
			"border var(--transition)"
		].join(", ");
		style["scrollbar-width"] = style["scrollbar-width"] || "thin";
		style["scrollbar-color"] = style["scrollbar-color"] || `${defaultThumbColor} ${defaultTrackColor}`;
		style["&::-webkit-scrollbar"] = {
			width: sizeValue,
			height: sizeValue,
			transition: baseTransition,
			background: defaultTrackColor,
			...style["&::-webkit-scrollbar"] || {}
		};
		style["&::-webkit-scrollbar-thumb"] = {
			"border-radius": "8px",
			"min-height": "24px",
			transition: baseTransition,
			background: defaultThumbColor,
			...style["&::-webkit-scrollbar-thumb"] || {}
		};
		style["&::-webkit-scrollbar-track"] = {
			background: defaultTrackColor,
			transition: baseTransition,
			...style["&::-webkit-scrollbar-track"] || {}
		};
		style["&::-webkit-scrollbar-corner"] = {
			background: defaultTrackColor,
			transition: baseTransition,
			...style["&::-webkit-scrollbar-corner"] || {}
		};
	}
	return style;
}
scrollbarStyle.__lookupStyles = ["scrollbar", "overflow"];

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