import { clerkCssVar } from "../utils/cssVariables.js";
import { colors } from "../utils/colors/index.js";

//#region src/styledSystem/common.ts
const textVariants = (t) => {
	const base = {
		fontFamily: "inherit",
		letterSpacing: t.letterSpacings.$normal
	};
	return {
		h1: {
			...base,
			fontWeight: t.fontWeights.$semibold,
			fontSize: t.fontSizes.$xl,
			lineHeight: t.lineHeights.$extraSmall
		},
		h2: {
			...base,
			fontWeight: t.fontWeights.$bold,
			fontSize: t.fontSizes.$lg,
			lineHeight: t.lineHeights.$medium
		},
		h3: {
			...base,
			fontWeight: t.fontWeights.$bold,
			fontSize: t.fontSizes.$md,
			lineHeight: t.lineHeights.$small
		},
		subtitle: {
			...base,
			fontWeight: t.fontWeights.$medium,
			fontSize: t.fontSizes.$md,
			lineHeight: t.lineHeights.$small
		},
		body: {
			...base,
			fontWeight: t.fontWeights.$normal,
			fontSize: t.fontSizes.$md,
			lineHeight: t.lineHeights.$small
		},
		caption: {
			...base,
			fontWeight: t.fontWeights.$medium,
			fontSize: t.fontSizes.$xs,
			lineHeight: t.lineHeights.$large
		},
		buttonLarge: {
			...base,
			fontWeight: t.fontWeights.$medium,
			fontSize: t.fontSizes.$md,
			lineHeight: t.lineHeights.$small,
			fontFamily: t.fonts.$buttons
		},
		buttonSmall: {
			...base,
			fontWeight: t.fontWeights.$medium,
			fontSize: t.fontSizes.$sm,
			lineHeight: t.lineHeights.$extraSmall,
			fontFamily: t.fonts.$buttons
		}
	};
};
const borderVariants = (t, props) => {
	const hoverBorderColor = !props?.hasError ? t.colors.$borderAlpha300 : t.colors.$dangerAlpha500;
	const hoverBoxShadow = t.shadows.$input.replace("{{color}}", !props?.hasError ? t.colors.$borderAlpha150 : t.colors.$dangerAlpha200);
	const hoverStyles = props?.hoverStyles === false ? {} : { "&:hover": {
		WebkitTapHighlightColor: "transparent",
		borderColor: hoverBorderColor,
		boxShadow: hoverBoxShadow
	} };
	const focusStyles = props?.focusRing === false ? {} : { "&:focus": {
		borderColor: hoverBorderColor,
		WebkitTapHighlightColor: "transparent",
		boxShadow: [hoverBoxShadow, t.shadows.$focusRing.replace("{{color}}", !props?.hasError ? t.colors.$borderAlpha150 : t.colors.$dangerAlpha200)].toString()
	} };
	const borderColor$1 = !props?.hasError ? !props?.hasWarning ? t.colors.$borderAlpha150 : t.colors.$warningAlpha300 : t.colors.$dangerAlpha500;
	const boxShadow = !props?.hasError ? !props?.hasWarning ? t.colors.$borderAlpha100 : t.colors.$warningAlpha50 : t.colors.$borderAlpha150;
	return { normal: {
		borderRadius: t.radii.$md,
		borderWidth: t.borderWidths.$normal,
		borderStyle: t.borderStyles.$solid,
		borderColor: borderColor$1,
		boxShadow: t.shadows.$input.replace("{{color}}", boxShadow),
		transitionProperty: t.transitionProperty.$common,
		transitionTimingFunction: t.transitionTiming.$common,
		transitionDuration: t.transitionDuration.$focusRing,
		...hoverStyles,
		...focusStyles
	} };
};
const borderColor = (t, props) => {
	return { borderColor: props?.hasError ? t.colors.$dangerAlpha500 : t.colors.$borderAlpha150 };
};
const focusRingStyles = (t) => {
	return {
		"&::-moz-focus-inner": { border: "0" },
		WebkitTapHighlightColor: "transparent",
		boxShadow: t.shadows.$focusRing.replace("{{color}}", t.colors.$colorRing),
		transitionProperty: t.transitionProperty.$common,
		transitionTimingFunction: t.transitionTiming.$common,
		transitionDuration: t.transitionDuration.$focusRing
	};
};
const focusRing = (t) => {
	return { "&:focus": { ...focusRingStyles(t) } };
};
const disabled = (t) => {
	return { "&:disabled,&[data-disabled]": {
		cursor: "not-allowed",
		pointerEvents: "none",
		opacity: t.opacity.$disabled
	} };
};
const centeredFlex = (display = "flex") => ({
	display,
	justifyContent: "center",
	alignItems: "center"
});
const unstyledScrollbar = (t) => ({
	"::-webkit-scrollbar": {
		background: "transparent",
		width: "8px",
		height: "8px"
	},
	"::-webkit-scrollbar-thumb": { background: t.colors.$neutralAlpha500 },
	"::-webkit-scrollbar-track": { background: "transparent" }
});
const maxHeightScroller = (t) => ({
	height: "100%",
	overflowY: "auto",
	...unstyledScrollbar(t)
});
const mergedColorsBackground = (colorBack, colorFront) => {
	return `linear-gradient(${colorFront},${colorFront}), linear-gradient(${colorBack}, ${colorBack})`;
};
const mutedBackground = (t) => {
	return clerkCssVar("color-muted", t.colors.$colorMuted || mergedColorsBackground(colors.setAlpha(t.colors.$colorBackground, 1), t.colors.$neutralAlpha50));
};
const visuallyHidden = () => ({
	clip: "rect(0 0 0 0)",
	clipPath: "inset(50%)",
	height: "1px",
	overflow: "hidden",
	position: "absolute",
	whiteSpace: "nowrap",
	width: "1px"
});
const common = {
	textVariants,
	borderVariants,
	focusRingStyles,
	focusRing,
	disabled,
	borderColor,
	centeredFlex,
	maxHeightScroller,
	mutedBackground,
	unstyledScrollbar,
	mergedColorsBackground,
	visuallyHidden
};

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