import { resetComponent, textEllipsis } from "../../style/index.js";
import { genCssVar } from "../../theme/util/genStyleUtils.js";
import select_input_customize_default from "./select-input-customize.js";
import select_input_multiple_default from "./select-input-multiple.js";
import { unit } from "@antdv-next/cssinjs";

//#region src/select/style/select-input.ts
/** Set CSS variables and hover/focus styles for a Select input based on provided colors. */
function genSelectInputVariableStyle(token, colors) {
	const { componentCls, antCls } = token;
	const [varName] = genCssVar(antCls, "select");
	const { border, borderHover, borderActive, borderOutline } = colors;
	const baseBG = colors.background || token.selectorBg || token.colorBgContainer;
	return {
		[varName("border-color")]: border,
		[varName("background-color")]: baseBG,
		[varName("color")]: colors.color || token.colorText,
		[`&:not(${componentCls}-disabled)`]: {
			"&:hover": {
				[varName("border-color")]: borderHover,
				[varName("background-color")]: colors.backgroundHover || baseBG
			},
			[`&${componentCls}-focused`]: {
				[varName("border-color")]: borderActive,
				[varName("background-color")]: colors.backgroundActive || baseBG,
				boxShadow: `0 0 0 ${unit(token.controlOutlineWidth)} ${borderOutline}`
			}
		},
		[`&${componentCls}-disabled`]: {
			[varName("border-color")]: colors.borderDisabled || colors.border,
			[varName("background-color")]: colors.backgroundDisabled || colors.background
		}
	};
}
/** Generate variant-scoped variable styles and status overrides for a Select input. */
function genSelectInputVariantStyle(token, variant, colors, errorColors = {}, warningColors = {}, patchStyle) {
	const { componentCls } = token;
	return { [`&${componentCls}-${variant}`]: [
		genSelectInputVariableStyle(token, colors),
		{
			[`&${componentCls}-status-error`]: genSelectInputVariableStyle(token, {
				...colors,
				color: errorColors.color || token.colorError,
				...errorColors
			}),
			[`&${componentCls}-status-warning`]: genSelectInputVariableStyle(token, {
				...colors,
				color: warningColors.color || token.colorWarning,
				...warningColors
			})
		},
		patchStyle
	] };
}
const genSelectInputStyle = (token) => {
	const { componentCls, fontHeight, controlHeight, iconCls, antCls, calc } = token;
	const [varName, varRef] = genCssVar(antCls, "select");
	const contentMarginInlineEnd = token.max(calc(token.showArrowPaddingInlineEnd).sub(token.fontSizeIcon).equal(), 0);
	return { [componentCls]: [
		{
			[varName("border-radius")]: token.borderRadius,
			[varName("border-color")]: "#000",
			[varName("border-size")]: token.lineWidth,
			[varName("background-color")]: token.colorBgContainer,
			[varName("font-size")]: token.fontSize,
			[varName("line-height")]: token.lineHeight,
			[varName("font-height")]: fontHeight,
			[varName("color")]: token.colorText,
			[varName("height")]: controlHeight,
			[varName("padding-horizontal")]: calc(token.paddingSM).sub(token.lineWidth).equal(),
			[varName("padding-vertical")]: `calc((${varRef("height")} - ${varRef("font-height")}) / 2 - ${varRef("border-size")})`,
			...resetComponent(token),
			display: "inline-flex",
			flexWrap: "nowrap",
			position: "relative",
			transition: `all ${token.motionDurationSlow}`,
			alignItems: "flex-start",
			outline: 0,
			cursor: "pointer",
			borderRadius: varRef("border-radius"),
			borderWidth: varRef("border-size"),
			borderStyle: token.lineType,
			borderColor: varRef("border-color"),
			background: varRef("background-color"),
			fontSize: varRef("font-size"),
			lineHeight: varRef("line-height"),
			color: varRef("color"),
			paddingInline: varRef("padding-horizontal"),
			paddingBlock: varRef("padding-vertical"),
			[`${componentCls}-prefix`]: {
				flex: "none",
				lineHeight: 1
			},
			[`${componentCls}-placeholder`]: {
				...textEllipsis,
				color: token.colorTextPlaceholder,
				pointerEvents: "none",
				zIndex: 1
			},
			[`${componentCls}-content`]: {
				flex: "auto",
				minWidth: 0,
				position: "relative",
				display: "flex",
				marginInlineEnd: contentMarginInlineEnd,
				"&:before": {
					content: "\"\\a0\"",
					width: 0,
					overflow: "hidden"
				},
				"&-value": { visibility: "inherit" },
				"input[readonly]": {
					cursor: "inherit",
					caretColor: "transparent"
				}
			},
			[`${componentCls}-suffix`]: {
				flex: "none",
				color: token.colorTextQuaternary,
				fontSize: token.fontSizeIcon,
				lineHeight: 1,
				"> :not(:last-child)": { marginInlineEnd: token.marginXS }
			},
			[`${componentCls}-prefix, ${componentCls}-suffix`]: {
				alignSelf: "center",
				[iconCls]: { verticalAlign: "top" }
			},
			"&-disabled": {
				background: token.colorBgContainerDisabled,
				color: token.colorTextDisabled,
				cursor: "not-allowed",
				input: { cursor: "not-allowed" }
			},
			"&-sm": {
				[varName("height")]: token.controlHeightSM,
				[varName("padding-horizontal")]: calc(token.paddingXS).sub(token.lineWidth).equal(),
				[varName("border-radius")]: token.borderRadiusSM,
				[`${componentCls}-clear`]: { insetInlineEnd: varRef("padding-horizontal") }
			},
			"&-lg": {
				[varName("height")]: token.controlHeightLG,
				[varName("font-size")]: token.fontSizeLG,
				[varName("line-height")]: token.lineHeightLG,
				[varName("font-height")]: token.fontHeightLG,
				[varName("border-radius")]: token.borderRadiusLG
			}
		},
		{ [`&:not(${componentCls}-customize)`]: { [`${componentCls}-input`]: {
			outline: "none",
			background: "transparent",
			appearance: "none",
			border: 0,
			margin: 0,
			padding: 0,
			color: varRef("color"),
			fontFamily: "inherit",
			fontSize: "inherit",
			"&::-webkit-search-cancel-button": {
				display: "none",
				appearance: "none"
			}
		} } },
		{ [`&-single:not(${componentCls}-customize)`]: {
			[`${componentCls}-input`]: {
				position: "absolute",
				inset: 0,
				lineHeight: "inherit"
			},
			[`${componentCls}-content`]: {
				...textEllipsis,
				alignSelf: "center",
				"&-has-value": {
					display: "block",
					"&:before": { display: "none" }
				},
				"&-has-search-value": {
					color: "transparent",
					[`> :not(${componentCls}-input)`]: { opacity: 0 }
				},
				"&-value": {
					transition: `all ${token.motionDurationMid} ${token.motionEaseInOut}`,
					zIndex: 1
				}
			},
			[`&${componentCls}-open ${componentCls}-content`]: {
				color: token.colorTextPlaceholder,
				"&-has-search-value": { color: "transparent" }
			}
		} },
		{ [`&-show-search:not(${componentCls}-customize-input):not(${componentCls}-disabled)`]: { cursor: "text" } },
		select_input_multiple_default(token),
		genSelectInputVariantStyle(token, "outlined", {
			border: token.colorBorder,
			borderHover: token.hoverBorderColor,
			borderActive: token.activeBorderColor,
			borderOutline: token.activeOutlineColor,
			borderDisabled: token.colorBorderDisabled
		}, {
			border: token.colorError,
			borderHover: token.colorErrorBorderHover,
			borderActive: token.colorError,
			borderOutline: token.colorErrorOutline
		}, {
			border: token.colorWarning,
			borderHover: token.colorWarningHover,
			borderActive: token.colorWarning,
			borderOutline: token.colorWarningOutline
		}),
		genSelectInputVariantStyle(token, "filled", {
			border: "transparent",
			borderHover: "transparent",
			borderActive: token.activeBorderColor,
			borderOutline: "transparent",
			borderDisabled: token.colorBorderDisabled,
			background: token.colorFillTertiary,
			backgroundHover: token.colorFillSecondary,
			backgroundActive: token.colorBgContainer
		}, {
			color: token.colorErrorText,
			background: token.colorErrorBg,
			backgroundHover: token.colorErrorBgHover,
			borderActive: token.colorError
		}, {
			background: token.colorWarningBg,
			backgroundHover: token.colorWarningBgHover,
			borderActive: token.colorWarning
		}),
		genSelectInputVariantStyle(token, "borderless", {
			border: "transparent",
			borderHover: "transparent",
			borderActive: "transparent",
			borderOutline: "transparent",
			background: "transparent"
		}),
		genSelectInputVariantStyle(token, "underlined", {
			border: token.colorBorder,
			borderHover: token.hoverBorderColor,
			borderActive: token.activeBorderColor,
			borderOutline: "transparent"
		}, {
			border: token.colorError,
			borderHover: token.colorErrorBorderHover,
			borderActive: token.colorError
		}, {
			border: token.colorWarning,
			borderHover: token.colorWarningHover,
			borderActive: token.colorWarning
		}, {
			borderRadius: 0,
			borderTopColor: "transparent",
			borderInlineColor: "transparent"
		}),
		select_input_customize_default(token)
	] };
};
var select_input_default = genSelectInputStyle;

//#endregion
export { select_input_default as default };