import { genFocusOutline, genFocusStyle, resetComponent, textEllipsis } from "../../style/index.js";
import { genStyleHooks } from "../../theme/util/genStyleUtils.js";
import { mergeToken } from "../../theme/internal.js";
import { slideDownIn, slideDownOut, slideUpIn, slideUpOut } from "../../style/motion/slide.js";
import motion_default from "./motion.js";
import { unit } from "@antdv-next/cssinjs";

//#region src/tabs/style/index.ts
const genCardStyle = (token) => {
	const { componentCls, tabsCardPadding, cardBg, cardGutter, colorBorderSecondary, itemSelectedColor } = token;
	return { [`${componentCls}-card`]: {
		[`> ${componentCls}-nav, > div > ${componentCls}-nav`]: {
			[`${componentCls}-tab`]: {
				margin: 0,
				padding: tabsCardPadding,
				background: cardBg,
				border: `${unit(token.lineWidth)} ${token.lineType} ${colorBorderSecondary}`,
				transition: `all ${token.motionDurationSlow} ${token.motionEaseInOut}`
			},
			[`${componentCls}-tab-active`]: {
				color: itemSelectedColor,
				background: token.colorBgContainer
			},
			[`${componentCls}-tab-focus:has(${componentCls}-tab-btn:focus-visible)`]: genFocusOutline(token, -3),
			[`& ${componentCls}-tab${componentCls}-tab-focus ${componentCls}-tab-btn:focus-visible`]: { outline: "none" },
			[`${componentCls}-ink-bar`]: { visibility: "hidden" }
		},
		[`&${componentCls}-top, &${componentCls}-bottom`]: { [`> ${componentCls}-nav, > div > ${componentCls}-nav`]: { [`${componentCls}-tab + ${componentCls}-tab`]: { marginLeft: {
			_skip_check_: true,
			value: unit(cardGutter)
		} } } },
		[`&${componentCls}-top`]: { [`> ${componentCls}-nav, > div > ${componentCls}-nav`]: {
			[`${componentCls}-tab`]: { borderRadius: `${unit(token.borderRadiusLG)} ${unit(token.borderRadiusLG)} 0 0` },
			[`${componentCls}-tab-active`]: { borderBottomColor: token.colorBgContainer }
		} },
		[`&${componentCls}-bottom`]: { [`> ${componentCls}-nav, > div > ${componentCls}-nav`]: {
			[`${componentCls}-tab`]: { borderRadius: `0 0 ${unit(token.borderRadiusLG)} ${unit(token.borderRadiusLG)}` },
			[`${componentCls}-tab-active`]: { borderTopColor: token.colorBgContainer }
		} },
		[`&${componentCls}-left, &${componentCls}-right`]: { [`> ${componentCls}-nav, > div > ${componentCls}-nav`]: { [`${componentCls}-tab + ${componentCls}-tab`]: { marginTop: unit(cardGutter) } } },
		[`&${componentCls}-left`]: { [`> ${componentCls}-nav, > div > ${componentCls}-nav`]: {
			[`${componentCls}-tab`]: { borderRadius: {
				_skip_check_: true,
				value: `${unit(token.borderRadiusLG)} 0 0 ${unit(token.borderRadiusLG)}`
			} },
			[`${componentCls}-tab-active`]: { borderRightColor: {
				_skip_check_: true,
				value: token.colorBgContainer
			} }
		} },
		[`&${componentCls}-right`]: { [`> ${componentCls}-nav, > div > ${componentCls}-nav`]: {
			[`${componentCls}-tab`]: { borderRadius: {
				_skip_check_: true,
				value: `0 ${unit(token.borderRadiusLG)} ${unit(token.borderRadiusLG)} 0`
			} },
			[`${componentCls}-tab-active`]: { borderLeftColor: {
				_skip_check_: true,
				value: token.colorBgContainer
			} }
		} }
	} };
};
const genDropdownStyle = (token) => {
	const { antCls, componentCls, itemHoverColor, dropdownEdgeChildVerticalPadding } = token;
	return { [`${componentCls}-dropdown`]: {
		...resetComponent(token),
		position: "absolute",
		top: -9999,
		left: {
			_skip_check_: true,
			value: -9999
		},
		zIndex: token.zIndexPopup,
		display: "block",
		"&-hidden": { display: "none" },
		[`&${antCls}-slide-down-enter${antCls}-slide-down-enter-active${componentCls}-dropdown-placement-bottomLeft,
        &${antCls}-slide-down-appear${antCls}-slide-down-appear-active${componentCls}-dropdown-placement-bottomLeft,
        &${antCls}-slide-down-enter${antCls}-slide-down-enter-active${componentCls}-dropdown-placement-bottom,
        &${antCls}-slide-down-appear${antCls}-slide-down-appear-active${componentCls}-dropdown-placement-bottom,
        &${antCls}-slide-down-enter${antCls}-slide-down-enter-active${componentCls}-dropdown-placement-bottomRight,
        &${antCls}-slide-down-appear${antCls}-slide-down-appear-active${componentCls}-dropdown-placement-bottomRight`]: { animationName: slideUpIn },
		[`&${antCls}-slide-up-enter${antCls}-slide-up-enter-active${componentCls}-dropdown-placement-topLeft,
        &${antCls}-slide-up-appear${antCls}-slide-up-appear-active${componentCls}-dropdown-placement-topLeft,
        &${antCls}-slide-up-enter${antCls}-slide-up-enter-active${componentCls}-dropdown-placement-top,
        &${antCls}-slide-up-appear${antCls}-slide-up-appear-active${componentCls}-dropdown-placement-top,
        &${antCls}-slide-up-enter${antCls}-slide-up-enter-active${componentCls}-dropdown-placement-topRight,
        &${antCls}-slide-up-appear${antCls}-slide-up-appear-active${componentCls}-dropdown-placement-topRight`]: { animationName: slideDownIn },
		[`&${antCls}-slide-down-leave${antCls}-slide-down-leave-active${componentCls}-dropdown-placement-bottomLeft,
        &${antCls}-slide-down-leave${antCls}-slide-down-leave-active${componentCls}-dropdown-placement-bottom,
        &${antCls}-slide-down-leave${antCls}-slide-down-leave-active${componentCls}-dropdown-placement-bottomRight`]: { animationName: slideUpOut },
		[`&${antCls}-slide-up-leave${antCls}-slide-up-leave-active${componentCls}-dropdown-placement-topLeft,
        &${antCls}-slide-up-leave${antCls}-slide-up-leave-active${componentCls}-dropdown-placement-top,
        &${antCls}-slide-up-leave${antCls}-slide-up-leave-active${componentCls}-dropdown-placement-topRight`]: { animationName: slideDownOut },
		[`${componentCls}-dropdown-menu`]: {
			maxHeight: token.tabsDropdownHeight,
			margin: 0,
			padding: `${unit(dropdownEdgeChildVerticalPadding)} 0`,
			overflowX: "hidden",
			overflowY: "auto",
			textAlign: {
				_skip_check_: true,
				value: "left"
			},
			listStyleType: "none",
			backgroundColor: token.colorBgContainer,
			backgroundClip: "padding-box",
			borderRadius: token.borderRadiusLG,
			outline: "none",
			boxShadow: token.boxShadowSecondary,
			"&-item": {
				...textEllipsis,
				display: "flex",
				alignItems: "center",
				minWidth: token.tabsDropdownWidth,
				margin: 0,
				padding: `${unit(token.paddingXXS)} ${unit(token.paddingSM)}`,
				color: token.colorText,
				fontWeight: "normal",
				fontSize: token.fontSize,
				lineHeight: token.lineHeight,
				cursor: "pointer",
				transition: `all ${token.motionDurationSlow}`,
				"> span": {
					flex: 1,
					whiteSpace: "nowrap"
				},
				"&-remove": {
					flex: "none",
					marginLeft: {
						_skip_check_: true,
						value: token.marginSM
					},
					color: token.colorIcon,
					fontSize: token.fontSizeSM,
					background: "transparent",
					border: 0,
					cursor: "pointer",
					"&:hover": { color: itemHoverColor }
				},
				"&:hover": { background: token.controlItemBgHover },
				"&-disabled": { "&, &:hover": {
					color: token.colorTextDisabled,
					background: "transparent",
					cursor: "not-allowed"
				} }
			}
		}
	} };
};
const genPositionStyle = (token) => {
	const { componentCls, margin, colorBorderSecondary, horizontalMargin, verticalItemPadding, verticalItemMargin, motionDurationSlow, calc } = token;
	return {
		[`${componentCls}-top, ${componentCls}-bottom`]: {
			flexDirection: "column",
			[`> ${componentCls}-nav, > div > ${componentCls}-nav`]: {
				margin: horizontalMargin,
				"&::before": {
					position: "absolute",
					right: {
						_skip_check_: true,
						value: 0
					},
					left: {
						_skip_check_: true,
						value: 0
					},
					borderBottom: `${unit(token.lineWidth)} ${token.lineType} ${colorBorderSecondary}`,
					content: "''"
				},
				[`${componentCls}-ink-bar`]: {
					height: token.lineWidthBold,
					"&-animated": { transition: [
						"width",
						"left",
						"right"
					].map((prop) => `${prop} ${motionDurationSlow}`).join(", ") }
				},
				[`${componentCls}-nav-wrap`]: {
					"&::before, &::after": {
						top: 0,
						bottom: 0,
						width: token.controlHeight
					},
					"&::before": {
						left: {
							_skip_check_: true,
							value: 0
						},
						boxShadow: token.boxShadowTabsOverflowLeft
					},
					"&::after": {
						right: {
							_skip_check_: true,
							value: 0
						},
						boxShadow: token.boxShadowTabsOverflowRight
					},
					[`&${componentCls}-nav-wrap-ping-left::before`]: { opacity: 1 },
					[`&${componentCls}-nav-wrap-ping-right::after`]: { opacity: 1 }
				}
			}
		},
		[`${componentCls}-top`]: { [`> ${componentCls}-nav,
        > div > ${componentCls}-nav`]: {
			"&::before": { bottom: 0 },
			[`${componentCls}-ink-bar`]: { bottom: 0 }
		} },
		[`${componentCls}-bottom`]: {
			[`> ${componentCls}-nav, > div > ${componentCls}-nav`]: {
				order: 1,
				marginTop: margin,
				marginBottom: 0,
				"&::before": { top: 0 },
				[`${componentCls}-ink-bar`]: { top: 0 }
			},
			[`> ${componentCls}-content-holder, > div > ${componentCls}-content-holder`]: { order: 0 }
		},
		[`${componentCls}-left, ${componentCls}-right`]: { [`> ${componentCls}-nav, > div > ${componentCls}-nav`]: {
			flexDirection: "column",
			minWidth: calc(token.controlHeight).mul(1.25).equal(),
			[`${componentCls}-tab`]: {
				padding: verticalItemPadding,
				textAlign: "center"
			},
			[`${componentCls}-tab + ${componentCls}-tab`]: { margin: verticalItemMargin },
			[`${componentCls}-nav-wrap`]: {
				flexDirection: "column",
				"&::before, &::after": {
					right: {
						_skip_check_: true,
						value: 0
					},
					left: {
						_skip_check_: true,
						value: 0
					},
					height: token.controlHeight
				},
				"&::before": {
					top: 0,
					boxShadow: token.boxShadowTabsOverflowTop
				},
				"&::after": {
					bottom: 0,
					boxShadow: token.boxShadowTabsOverflowBottom
				},
				[`&${componentCls}-nav-wrap-ping-top::before`]: { opacity: 1 },
				[`&${componentCls}-nav-wrap-ping-bottom::after`]: { opacity: 1 }
			},
			[`${componentCls}-ink-bar`]: {
				width: token.lineWidthBold,
				"&-animated": { transition: ["height", "top"].map((prop) => `${prop} ${motionDurationSlow}`).join(", ") }
			},
			[`${componentCls}-nav-list, ${componentCls}-nav-operations`]: {
				flex: "1 0 auto",
				flexDirection: "column"
			}
		} },
		[`${componentCls}-left`]: {
			[`> ${componentCls}-nav, > div > ${componentCls}-nav`]: { [`${componentCls}-ink-bar`]: { right: {
				_skip_check_: true,
				value: 0
			} } },
			[`> ${componentCls}-content-holder, > div > ${componentCls}-content-holder`]: {
				marginLeft: {
					_skip_check_: true,
					value: unit(calc(token.lineWidth).mul(-1).equal())
				},
				borderLeft: {
					_skip_check_: true,
					value: `${unit(token.lineWidth)} ${token.lineType} ${token.colorBorder}`
				},
				[`> ${componentCls}-content > ${componentCls}-tabpane`]: { paddingLeft: {
					_skip_check_: true,
					value: token.paddingLG
				} }
			}
		},
		[`${componentCls}-right`]: {
			[`> ${componentCls}-nav, > div > ${componentCls}-nav`]: {
				order: 1,
				[`${componentCls}-ink-bar`]: { left: {
					_skip_check_: true,
					value: 0
				} }
			},
			[`> ${componentCls}-content-holder, > div > ${componentCls}-content-holder`]: {
				order: 0,
				marginRight: {
					_skip_check_: true,
					value: calc(token.lineWidth).mul(-1).equal()
				},
				borderRight: {
					_skip_check_: true,
					value: `${unit(token.lineWidth)} ${token.lineType} ${token.colorBorder}`
				},
				[`> ${componentCls}-content > ${componentCls}-tabpane`]: { paddingRight: {
					_skip_check_: true,
					value: token.paddingLG
				} }
			}
		}
	};
};
const genSizeStyle = (token) => {
	const { componentCls, cardPaddingSM, cardPaddingLG, cardHeightSM, cardHeightLG, horizontalItemPaddingSM, horizontalItemPaddingLG } = token;
	return {
		[componentCls]: {
			"&-small": { [`> ${componentCls}-nav`]: { [`${componentCls}-tab`]: {
				padding: horizontalItemPaddingSM,
				fontSize: token.titleFontSizeSM
			} } },
			"&-large": { [`> ${componentCls}-nav`]: { [`${componentCls}-tab`]: {
				padding: horizontalItemPaddingLG,
				fontSize: token.titleFontSizeLG,
				lineHeight: token.lineHeightLG
			} } }
		},
		[`${componentCls}-card`]: {
			[`&${componentCls}-small`]: {
				[`> ${componentCls}-nav`]: {
					[`${componentCls}-tab`]: { padding: cardPaddingSM },
					[`${componentCls}-nav-add`]: {
						minWidth: cardHeightSM,
						minHeight: cardHeightSM
					}
				},
				[`&${componentCls}-bottom`]: { [`> ${componentCls}-nav ${componentCls}-tab`]: { borderRadius: `0 0 ${unit(token.borderRadius)} ${unit(token.borderRadius)}` } },
				[`&${componentCls}-top`]: { [`> ${componentCls}-nav ${componentCls}-tab`]: { borderRadius: `${unit(token.borderRadius)} ${unit(token.borderRadius)} 0 0` } },
				[`&${componentCls}-right`]: { [`> ${componentCls}-nav ${componentCls}-tab`]: { borderRadius: {
					_skip_check_: true,
					value: `0 ${unit(token.borderRadius)} ${unit(token.borderRadius)} 0`
				} } },
				[`&${componentCls}-left`]: { [`> ${componentCls}-nav ${componentCls}-tab`]: { borderRadius: {
					_skip_check_: true,
					value: `${unit(token.borderRadius)} 0 0 ${unit(token.borderRadius)}`
				} } }
			},
			[`&${componentCls}-large`]: { [`> ${componentCls}-nav`]: {
				[`${componentCls}-tab`]: { padding: cardPaddingLG },
				[`${componentCls}-nav-add`]: {
					minWidth: cardHeightLG,
					minHeight: cardHeightLG
				}
			} }
		}
	};
};
const genTabStyle = (token) => {
	const { componentCls, itemActiveColor, itemHoverColor, iconCls, tabsHorizontalItemMargin, horizontalItemPadding, itemSelectedColor, itemColor } = token;
	const tabCls = `${componentCls}-tab`;
	return {
		[tabCls]: {
			position: "relative",
			WebkitTouchCallout: "none",
			WebkitTapHighlightColor: "transparent",
			display: "inline-flex",
			alignItems: "center",
			padding: horizontalItemPadding,
			fontSize: token.titleFontSize,
			background: "transparent",
			border: 0,
			outline: "none",
			cursor: "pointer",
			color: itemColor,
			"&-btn, &-remove": { "&:focus:not(:focus-visible), &:active": { color: itemActiveColor } },
			"&-btn": {
				outline: "none",
				transition: `all ${token.motionDurationSlow}`,
				[`${tabCls}-icon:not(:last-child)`]: { marginInlineEnd: token.marginSM }
			},
			"&-remove": {
				flex: "none",
				lineHeight: 1,
				marginRight: {
					_skip_check_: true,
					value: token.calc(token.marginXXS).mul(-1).equal()
				},
				marginLeft: {
					_skip_check_: true,
					value: token.marginXS
				},
				color: token.colorIcon,
				fontSize: token.fontSizeSM,
				background: "transparent",
				border: "none",
				outline: "none",
				cursor: "pointer",
				transition: `all ${token.motionDurationSlow}`,
				"&:hover": { color: token.colorTextHeading },
				...genFocusStyle(token)
			},
			"&:hover": { color: itemHoverColor },
			[`&${tabCls}-active ${tabCls}-btn`]: { color: itemSelectedColor },
			[`&${tabCls}-focus ${tabCls}-btn:focus-visible`]: genFocusOutline(token),
			[`&${tabCls}-disabled`]: {
				color: token.colorTextDisabled,
				cursor: "not-allowed"
			},
			[`&${tabCls}-disabled ${tabCls}-btn, &${tabCls}-disabled ${componentCls}-remove`]: { "&:focus, &:active": { color: token.colorTextDisabled } },
			[`& ${tabCls}-remove ${iconCls}`]: {
				margin: 0,
				verticalAlign: "middle"
			},
			[`${iconCls}:not(:last-child)`]: { marginRight: {
				_skip_check_: true,
				value: token.marginSM
			} }
		},
		[`${tabCls} + ${tabCls}`]: { margin: {
			_skip_check_: true,
			value: tabsHorizontalItemMargin
		} }
	};
};
const genRtlStyle = (token) => {
	const { componentCls, tabsHorizontalItemMarginRTL, iconCls, cardGutter, calc } = token;
	return {
		[`${componentCls}-rtl`]: {
			direction: "rtl",
			[`${componentCls}-nav`]: { [`${componentCls}-tab`]: {
				margin: {
					_skip_check_: true,
					value: tabsHorizontalItemMarginRTL
				},
				[`${componentCls}-tab:last-of-type`]: { marginLeft: {
					_skip_check_: true,
					value: 0
				} },
				[iconCls]: {
					marginRight: {
						_skip_check_: true,
						value: 0
					},
					marginLeft: {
						_skip_check_: true,
						value: unit(token.marginSM)
					}
				},
				[`${componentCls}-tab-remove`]: {
					marginRight: {
						_skip_check_: true,
						value: unit(token.marginXS)
					},
					marginLeft: {
						_skip_check_: true,
						value: unit(calc(token.marginXXS).mul(-1).equal())
					},
					[iconCls]: { margin: 0 }
				}
			} },
			[`&${componentCls}-left`]: {
				[`> ${componentCls}-nav`]: { order: 1 },
				[`> ${componentCls}-content-holder`]: { order: 0 }
			},
			[`&${componentCls}-right`]: {
				[`> ${componentCls}-nav`]: { order: 0 },
				[`> ${componentCls}-content-holder`]: { order: 1 }
			},
			[`&${componentCls}-card${componentCls}-top, &${componentCls}-card${componentCls}-bottom`]: { [`> ${componentCls}-nav, > div > ${componentCls}-nav`]: { [`${componentCls}-tab + ${componentCls}-tab`]: {
				marginRight: {
					_skip_check_: true,
					value: cardGutter
				},
				marginLeft: {
					_skip_check_: true,
					value: 0
				}
			} } }
		},
		[`${componentCls}-dropdown-rtl`]: { direction: "rtl" },
		[`${componentCls}-menu-item`]: { [`${componentCls}-dropdown-rtl`]: { textAlign: {
			_skip_check_: true,
			value: "right"
		} } }
	};
};
const genTabsStyle = (token) => {
	const { componentCls, tabsCardPadding, cardHeight, cardGutter, itemHoverColor, itemActiveColor, colorBorderSecondary } = token;
	return {
		[componentCls]: {
			...resetComponent(token),
			display: "flex",
			[`> ${componentCls}-nav, > div > ${componentCls}-nav`]: {
				position: "relative",
				display: "flex",
				flex: "none",
				alignItems: "center",
				[`${componentCls}-nav-wrap`]: {
					position: "relative",
					display: "flex",
					flex: "auto",
					alignSelf: "stretch",
					overflow: "hidden",
					whiteSpace: "nowrap",
					transform: "translate(0)",
					"&::before, &::after": {
						position: "absolute",
						zIndex: 1,
						opacity: 0,
						transition: `opacity ${token.motionDurationSlow}`,
						content: "''",
						pointerEvents: "none"
					}
				},
				[`${componentCls}-nav-list`]: {
					position: "relative",
					display: "flex",
					transition: `opacity ${token.motionDurationSlow}`
				},
				[`${componentCls}-nav-operations`]: {
					display: "flex",
					alignSelf: "stretch"
				},
				[`${componentCls}-nav-operations-hidden`]: {
					position: "absolute",
					visibility: "hidden",
					pointerEvents: "none"
				},
				[`${componentCls}-nav-more`]: {
					position: "relative",
					padding: tabsCardPadding,
					background: "transparent",
					border: 0,
					color: token.colorText,
					"&::after": {
						position: "absolute",
						right: {
							_skip_check_: true,
							value: 0
						},
						bottom: 0,
						left: {
							_skip_check_: true,
							value: 0
						},
						height: token.calc(token.controlHeightLG).div(8).equal(),
						transform: "translateY(100%)",
						content: "''"
					}
				},
				[`${componentCls}-nav-add`]: {
					minWidth: cardHeight,
					minHeight: cardHeight,
					marginLeft: {
						_skip_check_: true,
						value: cardGutter
					},
					background: "transparent",
					border: `${unit(token.lineWidth)} ${token.lineType} ${colorBorderSecondary}`,
					borderRadius: `${unit(token.borderRadiusLG)} ${unit(token.borderRadiusLG)} 0 0`,
					outline: "none",
					cursor: "pointer",
					color: token.colorText,
					transition: `all ${token.motionDurationSlow} ${token.motionEaseInOut}`,
					"&:hover": { color: itemHoverColor },
					"&:active, &:focus:not(:focus-visible)": { color: itemActiveColor },
					...genFocusStyle(token, -3)
				}
			},
			[`${componentCls}-extra-content`]: { flex: "none" },
			[`${componentCls}-ink-bar`]: {
				position: "absolute",
				background: token.inkBarColor,
				pointerEvents: "none"
			},
			...genTabStyle(token),
			[`${componentCls}-content`]: {
				position: "relative",
				width: "100%"
			},
			[`${componentCls}-content-holder`]: {
				flex: "auto",
				minWidth: 0,
				minHeight: 0
			},
			[`${componentCls}-tabpane`]: {
				...genFocusStyle(token),
				"&-hidden": { display: "none" }
			}
		},
		[`${componentCls}-centered`]: { [`> ${componentCls}-nav, > div > ${componentCls}-nav`]: { [`${componentCls}-nav-wrap`]: { [`&:not([class*='${componentCls}-nav-wrap-ping']) > ${componentCls}-nav-list`]: { margin: "auto" } } } }
	};
};
const prepareComponentToken = (token) => {
	const { cardHeight, cardHeightSM, cardHeightLG, controlHeight, controlHeightLG } = token;
	const mergedCardHeight = cardHeight || controlHeightLG;
	const mergedCardHeightSM = cardHeightSM || controlHeight;
	const mergedCardHeightLG = cardHeightLG || controlHeightLG + 8;
	return {
		zIndexPopup: token.zIndexPopupBase + 50,
		cardBg: token.colorFillAlter,
		cardHeight: mergedCardHeight,
		cardHeightSM: mergedCardHeightSM,
		cardHeightLG: mergedCardHeightLG,
		cardPadding: `${(mergedCardHeight - token.fontHeight) / 2 - token.lineWidth}px ${token.padding}px`,
		cardPaddingSM: `${(mergedCardHeightSM - token.fontHeight) / 2 - token.lineWidth}px ${token.paddingXS}px`,
		cardPaddingLG: `${(mergedCardHeightLG - token.fontHeightLG) / 2 - token.lineWidth}px ${token.padding}px`,
		titleFontSize: token.fontSize,
		titleFontSizeLG: token.fontSizeLG,
		titleFontSizeSM: token.fontSize,
		inkBarColor: token.colorPrimary,
		horizontalMargin: `0 0 ${token.margin}px 0`,
		horizontalItemGutter: 32,
		horizontalItemMargin: ``,
		horizontalItemMarginRTL: ``,
		horizontalItemPadding: `${token.paddingSM}px 0`,
		horizontalItemPaddingSM: `${token.paddingXS}px 0`,
		horizontalItemPaddingLG: `${token.padding}px 0`,
		verticalItemPadding: `${token.paddingXS}px ${token.paddingLG}px`,
		verticalItemMargin: `${token.margin}px 0 0 0`,
		itemColor: token.colorText,
		itemSelectedColor: token.colorPrimary,
		itemHoverColor: token.colorPrimaryHover,
		itemActiveColor: token.colorPrimaryActive,
		cardGutter: token.marginXXS / 2
	};
};
var style_default = genStyleHooks("Tabs", (token) => {
	const tabsToken = mergeToken(token, {
		tabsCardPadding: token.cardPadding,
		dropdownEdgeChildVerticalPadding: token.paddingXXS,
		tabsDropdownHeight: 200,
		tabsDropdownWidth: 120,
		tabsHorizontalItemMargin: `0 0 0 ${unit(token.horizontalItemGutter)}`,
		tabsHorizontalItemMarginRTL: `0 0 0 ${unit(token.horizontalItemGutter)}`
	});
	return [
		genSizeStyle(tabsToken),
		genRtlStyle(tabsToken),
		genPositionStyle(tabsToken),
		genDropdownStyle(tabsToken),
		genCardStyle(tabsToken),
		genTabsStyle(tabsToken),
		motion_default(tabsToken)
	];
}, prepareComponentToken);

//#endregion
export { style_default as default, prepareComponentToken };