import { n as AnalyticsId } from "./constants2.js";
import { t as usePseudoClasses } from "./usePseudoClasses.js";
import { n as mergeRefs } from "./refs.js";
import { t as Icon_default } from "./Icon.js";
import { t as useIsMobileBreakpoint } from "./useIsMobileBreakpoint.js";
import { t as X_default } from "./X.js";
import classNames from "classnames";
import { jsx } from "react/jsx-runtime";
import styles from "./components/Close/styles.module.scss";
var Close = (props) => {
	const { small, testId, ariaLabel = "Lukk", onClick, className, color = "blueberry", ref } = props;
	const { refObject, isHovered } = usePseudoClasses();
	const iconSize = useIsMobileBreakpoint() || small ? 38 : 48;
	let iconColor;
	if (color === "black") iconColor = "black";
	else if (color === "plum") iconColor = "var(--core-color-plum-700)";
	else iconColor = "var(--color-action-graphics-onlight)";
	const closeClasses = classNames(styles.close, { [styles["close--small"]]: small }, className);
	return /* @__PURE__ */ jsx("button", {
		ref: mergeRefs([ref, refObject]),
		"data-testid": testId,
		"data-analyticsid": AnalyticsId.Close,
		className: closeClasses,
		"aria-label": ariaLabel,
		onClick,
		type: "button",
		children: /* @__PURE__ */ jsx("span", {
			className: classNames(styles["close__inner-container"], {
				[styles["close__inner-container--small"]]: small,
				[styles["close__inner-container--plum"]]: color == "plum"
			}),
			children: /* @__PURE__ */ jsx(Icon_default, {
				svgIcon: X_default,
				color: iconColor,
				size: iconSize,
				isHovered
			})
		})
	});
};
var Close_default$1 = Close;
export { Close_default$1 as t };

//# sourceMappingURL=Close.js.map