Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const require_chunk = require("../chunk-BN4qSVkS.cjs");
const require_styles_themes = require("../styles/themes.cjs");
const require_router = require("../router.cjs");
const require_components_Icon_Icon = require("./Icon/Icon.cjs");
const require_components_Flex = require("./Flex.cjs");
let _emotion_styled = require("@emotion/styled");
_emotion_styled = require_chunk.__toESM(_emotion_styled);
let _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
//#region src/components/IconWithCircleBackground.tsx
function IconWithCircleBackground({ iconName = "WarningSign", iconWidth = 40, to, onClick, padding, darkBg = false, shouldRotate = false, noBg = false, hoverActiveBg = false, disabled = false, bgColor, iconColor, iconStrokeWidth, opaque = false, showNewTag = false }) {
	const content = /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(require_components_Flex.Flex, {
		center: true,
		onClick,
		disabled,
		as: onClick ? "button" : "div",
		asButtonType: "button",
		position: "relative",
		children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(StyledIconWithCircleBackground, {
			size: iconWidth,
			padding,
			darkBg,
			hoverActiveBg,
			shouldRotate,
			noBg,
			bgColor,
			children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_components_Icon_Icon.Icon, {
				name: iconName,
				width: iconWidth,
				color: iconColor ? iconColor : "secondary",
				iconProps: {
					strokeWidth: iconStrokeWidth,
					fill: opaque ? "currentColor" : "none"
				}
			})
		}), showNewTag && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(NewTag, {
			"data-testid": "icon-new-tag",
			children: "NEW"
		})]
	});
	return to ? /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
		css: { cursor: disabled ? "not-allowed" : void 0 },
		children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_router.Link, {
			to,
			disabled,
			children: content
		})
	}) : content;
}
const StyledIconWithCircleBackground = _emotion_styled.default.div`
  background: ${({ theme, darkBg, noBg, bgColor }) => darkBg ? `linear-gradient(291.4deg, #1C243F 0%, #21283A 100%)` : noBg ? "transparent" : bgColor ? require_styles_themes.getColor(theme, bgColor) : require_styles_themes.getColor(theme, "grayBlue94")};

  &:hover {
    ${({ theme, hoverActiveBg }) => hoverActiveBg ? `background: ${require_styles_themes.getColor(theme, "grayBlue94")}` : ""};
  }
  &:active {
    ${({ theme, hoverActiveBg }) => hoverActiveBg ? `background: ${require_styles_themes.getColor(theme, "grayBlue78")}` : ""};
  }

  border-radius: 50%;
  padding: ${({ size, padding }) => padding ?? getPadding(size)}px;
  display: flex;
  justify-content: center;
  ${({ size, padding }) => `width: ${size + (padding ?? getPadding(size)) * 2}px; height: ${size + (padding ?? getPadding(size)) * 2}px;`}

  @keyframes IconWithCircleBackgroundRotate {
    0% {
      transform: rotate(0);
    }
    35% {
      transform: rotate(360deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  ${({ shouldRotate }) => shouldRotate && `animation: IconWithCircleBackgroundRotate 10s ease infinite;`}
`;
function getPadding(size) {
	if (size === 48) return 38;
	if (size === 40) return 20;
	if (size === 36) return 14;
	if (size === 20) return 10;
	return 16;
}
const NewTag = _emotion_styled.default.div`
  position: absolute;
  right: 8px;
  bottom: -4px;

  display: flex;
  padding: 2px 4px;
  justify-content: center;
  align-items: center;
  gap: 4px;

  border-radius: 4px;
  background: #179a1c;

  color: #f9f9f9;
  font-family: Manrope;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  line-height: 12px; /* 133.333% */
  letter-spacing: 0.72px;
`;
//#endregion
exports.IconWithCircleBackground = IconWithCircleBackground;
