import { textEllipsis } from "../../style/index.js";
import { unit } from "@antdv-next/cssinjs";

//#region src/menu/style/vertical.ts
const getVerticalInlineStyle = (token) => {
	const { componentCls, itemHeight, itemMarginInline, padding, menuArrowSize, marginXS, itemMarginBlock, itemWidth, itemPaddingInline } = token;
	const paddingWithArrow = token.calc(menuArrowSize).add(padding).add(marginXS).equal();
	return {
		[`${componentCls}-item`]: {
			position: "relative",
			overflow: "hidden"
		},
		[`${componentCls}-item, ${componentCls}-submenu-title`]: {
			height: itemHeight,
			lineHeight: unit(itemHeight),
			paddingInline: itemPaddingInline,
			overflow: "hidden",
			textOverflow: "ellipsis",
			marginInline: itemMarginInline,
			marginBlock: itemMarginBlock,
			width: itemWidth
		},
		[`> ${componentCls}-item,
            > ${componentCls}-submenu > ${componentCls}-submenu-title`]: {
			height: itemHeight,
			lineHeight: unit(itemHeight)
		},
		[`${componentCls}-item-group-list ${componentCls}-submenu-title,
            ${componentCls}-submenu-title`]: { paddingInlineEnd: paddingWithArrow }
	};
};
const getVerticalStyle = (token) => {
	const { componentCls, iconCls, itemHeight, colorTextLightSolid, dropdownWidth, controlHeightLG, motionEaseOut, padding, paddingXL, itemMarginInline, fontSizeLG, motionDurationFast, motionDurationSlow, paddingXS, boxShadowSecondary, collapsedWidth, collapsedIconSize } = token;
	const inlineItemStyle = {
		height: itemHeight,
		lineHeight: unit(itemHeight),
		listStylePosition: "inside",
		listStyleType: "disc"
	};
	return [
		{
			[componentCls]: { "&-inline, &-vertical": {
				[`&${componentCls}-root`]: { boxShadow: "none" },
				...getVerticalInlineStyle(token)
			} },
			[`${componentCls}-submenu-popup`]: { [`${componentCls}-vertical`]: {
				...getVerticalInlineStyle(token),
				boxShadow: boxShadowSecondary
			} }
		},
		{ [`${componentCls}-submenu-popup ${componentCls}-vertical${componentCls}-sub`]: {
			minWidth: dropdownWidth,
			maxHeight: `calc(100vh - ${unit(token.calc(controlHeightLG).mul(2.5).equal())})`,
			padding: "0",
			overflow: "hidden",
			borderInlineEnd: 0,
			"&:not([class*='-active'])": {
				overflowX: "hidden",
				overflowY: "auto"
			}
		} },
		{ [`${componentCls}-inline`]: {
			width: "100%",
			[`&${componentCls}-root`]: { [`${componentCls}-item, ${componentCls}-submenu-title`]: {
				display: "flex",
				alignItems: "center",
				transition: [
					`border-color ${motionDurationSlow}`,
					`background-color ${motionDurationSlow}`,
					`padding ${motionDurationFast} ${motionEaseOut}`
				].join(","),
				[`> ${componentCls}-title-content`]: {
					flex: "auto",
					minWidth: 0,
					overflow: "hidden",
					textOverflow: "ellipsis"
				},
				"> *": { flex: "none" }
			} },
			[`${componentCls}-sub${componentCls}-inline`]: {
				padding: 0,
				border: 0,
				borderRadius: 0,
				boxShadow: "none",
				[`& > ${componentCls}-submenu > ${componentCls}-submenu-title`]: inlineItemStyle,
				[`& ${componentCls}-item-group-title`]: { paddingInlineStart: paddingXL }
			},
			[`${componentCls}-item`]: inlineItemStyle
		} },
		{ [`${componentCls}-inline-collapsed`]: {
			width: collapsedWidth,
			[`&${componentCls}-root`]: { [`${componentCls}-item, ${componentCls}-submenu ${componentCls}-submenu-title`]: { [`> ${componentCls}-inline-collapsed-noicon`]: {
				fontSize: fontSizeLG,
				textAlign: "center"
			} } },
			[`> ${componentCls}-item,
          > ${componentCls}-item-group > ${componentCls}-item-group-list > ${componentCls}-item,
          > ${componentCls}-item-group > ${componentCls}-item-group-list > ${componentCls}-submenu > ${componentCls}-submenu-title,
          > ${componentCls}-submenu > ${componentCls}-submenu-title`]: {
				display: "flex",
				alignItems: "center",
				justifyContent: "center",
				insetInlineStart: 0,
				paddingInline: `calc(50% - ${unit(token.calc(collapsedIconSize).div(2).equal())} - ${unit(itemMarginInline)})`,
				textOverflow: "clip",
				[`
            ${componentCls}-submenu-arrow,
            ${componentCls}-submenu-expand-icon
          `]: { opacity: 0 },
				[`> ${componentCls}-title-content`]: {
					width: 0,
					opacity: 0,
					overflow: "hidden"
				},
				[`${componentCls}-item-icon, ${iconCls}`]: {
					margin: 0,
					fontSize: collapsedIconSize,
					lineHeight: unit(itemHeight),
					"+ span": {
						display: "inline-block",
						width: 0,
						opacity: 0,
						overflow: "hidden",
						marginInlineStart: 0
					}
				}
			},
			[`${componentCls}-item-icon, ${iconCls}`]: { display: "inline-block" },
			"&-tooltip": {
				pointerEvents: "none",
				[`${componentCls}-item-icon, ${iconCls}`]: { display: "none" },
				[`${componentCls}-item-extra`]: { paddingInlineStart: padding },
				"a, a:hover": { color: colorTextLightSolid }
			},
			[`${componentCls}-item-group-title`]: {
				...textEllipsis,
				paddingInline: paddingXS
			}
		} }
	];
};
var vertical_default = getVerticalStyle;

//#endregion
export { vertical_default as default };