import { genFocusStyle } from "../../style/index.js";
import { genCssVar } from "../../theme/util/genStyleUtils.js";
import { unit } from "@antdv-next/cssinjs";

//#region src/notification/style/notification.ts
/** Generate motion transitions shared by notification-like notice cards. */
function genNotificationItemMotionStyle(token) {
	const { motionDurationMid, motionEaseInOut } = token;
	const transition = `${motionDurationMid} ${motionEaseInOut}`;
	return {
		transform: "scale(var(--notification-scale, 1))",
		transition: [
			"transform",
			"inset",
			"clip-path",
			"opacity"
		].map((property) => `${property} ${transition}`).join(", ")
	};
}
/** Generate item styles shared by Notification and Message notice cards. */
function genListItemSharedStyle(token, config) {
	const { componentCls, antCls, colorSuccess, colorInfo, colorWarning, colorError, colorTextHeading, colorText, boxShadow, borderRadiusLG, fontSize, lineHeight, notificationBg, notificationPadding, notificationMarginEdge, margin, calc } = token;
	const noticeCls = `${componentCls}-notice`;
	const [varName, varRef] = genCssVar(antCls, "notification");
	return {
		[noticeCls]: {
			position: "absolute",
			width: config.width,
			maxWidth: `calc(100vw - ${unit(calc(notificationMarginEdge).mul(2).equal())})`,
			padding: notificationPadding,
			pointerEvents: "auto",
			[varName("icon-font-size")]: config.iconFontSize,
			[varName("title-font-size")]: config.titleFontSize,
			[varName("title-line-height")]: config.titleLineHeight,
			boxSizing: "border-box",
			color: colorText,
			background: notificationBg,
			borderRadius: borderRadiusLG,
			boxShadow,
			fontSize,
			lineHeight,
			wordWrap: "break-word",
			overflow: "visible",
			...genNotificationItemMotionStyle(token),
			...config.noticeStyle,
			"&::after": {
				position: "absolute",
				insetInline: 0,
				top: calc(margin).mul(-1).equal(),
				height: margin,
				content: "\"\""
			},
			...config.typeStyle && {
				"&-success": { background: varRef("color-success-bg", notificationBg) },
				"&-error": { background: varRef("color-error-bg", notificationBg) },
				"&-info": { background: varRef("color-info-bg", notificationBg) },
				"&-warning": { background: varRef("color-warning-bg", notificationBg) }
			}
		},
		[`${noticeCls}-wrapper`]: {
			display: "flex",
			...config.contentStyle
		},
		[`${noticeCls}-title`]: {
			color: colorTextHeading,
			fontSize: varRef("title-font-size"),
			lineHeight: varRef("title-line-height")
		},
		[`${noticeCls}-icon`]: {
			flex: "none",
			fontSize: varRef("icon-font-size"),
			lineHeight: 1,
			[`&${noticeCls}-icon-success`]: { color: colorSuccess },
			[`&${noticeCls}-icon-info, &${noticeCls}-icon-loading`]: { color: colorInfo },
			[`&${noticeCls}-icon-warning`]: { color: colorWarning },
			[`&${noticeCls}-icon-error`]: { color: colorError }
		}
	};
}
/** Generate the complete notice item styles for Notification. */
function genNotificationItemStyle(token) {
	const { componentCls, progressBg, notificationProgressHeight, fontSize, borderRadiusLG, width, notificationIconSize, colorText, motionDurationMid, fontSizeLG, lineHeightLG, marginSM, marginXS, paddingLG, notificationPaddingVertical, notificationPaddingHorizontal, notificationCloseButtonSize, colorIcon, borderRadiusSM, colorIconHover, colorBgTextHover, colorBgTextActive } = token;
	const noticeCls = `${componentCls}-notice`;
	return {
		...genListItemSharedStyle(token, {
			width,
			iconFontSize: notificationIconSize,
			titleFontSize: fontSizeLG,
			titleLineHeight: lineHeightLG,
			contentStyle: {
				alignItems: "flex-start",
				gap: marginSM
			},
			typeStyle: true
		}),
		[`${noticeCls}-section`]: {
			display: "flex",
			flexDirection: "column",
			flex: "auto",
			gap: marginXS,
			minWidth: 0
		},
		[`${noticeCls}-description`]: {
			color: colorText,
			fontSize
		},
		[`${noticeCls}-closable ${noticeCls}-title`]: { paddingInlineEnd: paddingLG },
		[`${noticeCls}-closable ${noticeCls}-description`]: { paddingInlineEnd: paddingLG },
		[`${noticeCls}-closable ${noticeCls}-title + ${noticeCls}-description`]: { paddingInlineEnd: 0 },
		[`${noticeCls}-close`]: {
			position: "absolute",
			top: notificationPaddingVertical,
			insetInlineEnd: notificationPaddingHorizontal,
			display: "flex",
			alignItems: "center",
			justifyContent: "center",
			width: notificationCloseButtonSize,
			height: notificationCloseButtonSize,
			color: colorIcon,
			background: "none",
			border: "none",
			borderRadius: borderRadiusSM,
			outline: "none",
			transition: ["color", "background-color"].map((prop) => `${prop} ${motionDurationMid}`).join(", "),
			"&:hover": {
				color: colorIconHover,
				backgroundColor: colorBgTextHover
			},
			"&:active": { backgroundColor: colorBgTextActive },
			...genFocusStyle(token)
		},
		[`${noticeCls}-progress`]: {
			position: "absolute",
			bottom: 0,
			display: "block",
			appearance: "none",
			inlineSize: `calc(100% - ${unit(borderRadiusLG)} * 2)`,
			blockSize: notificationProgressHeight,
			border: 0,
			left: {
				_skip_check_: true,
				value: borderRadiusLG
			},
			right: {
				_skip_check_: true,
				value: borderRadiusLG
			},
			"&, &::-webkit-progress-bar": {
				borderRadius: borderRadiusLG,
				backgroundColor: "rgba(0, 0, 0, 0.04)"
			},
			"&::-moz-progress-bar": { background: progressBg },
			"&::-webkit-progress-value": {
				borderRadius: borderRadiusLG,
				background: progressBg
			}
		},
		[`${noticeCls}-actions`]: {
			float: "right",
			marginTop: marginSM
		}
	};
}
/** Generate standalone PurePanel styles for Notification. */
function genPurePanelStyle(token) {
	const { componentCls, width } = token;
	const noticeCls = `${componentCls}-notice`;
	const actionsCls = `${noticeCls}-actions`;
	const notificationItemStyle = genNotificationItemStyle(token);
	return { [`${noticeCls}-pure-panel`]: {
		width,
		maxWidth: "100%",
		...notificationItemStyle,
		[noticeCls]: {
			...notificationItemStyle[noticeCls],
			position: "relative",
			width: "100%",
			maxWidth: "100%"
		},
		[actionsCls]: {
			...notificationItemStyle[actionsCls],
			float: "none",
			textAlign: "end"
		}
	} };
}
/** Wrap Notification item styles under the component root selector. */
const genNotificationStyle = (token) => {
	const { componentCls } = token;
	return { [componentCls]: genNotificationItemStyle(token) };
};
var notification_default = genNotificationStyle;

//#endregion
export { notification_default as default, genListItemSharedStyle, genPurePanelStyle };