"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var NotificationIcon_exports = {};
__export(NotificationIcon_exports, {
  default: () => NotificationIcon
});
module.exports = __toCommonJS(NotificationIcon_exports);
var import_react = __toESM(require("react"));
var import_styled_components = __toESM(require("styled-components"));
var Icons = __toESM(require("@ledgerhq/icons-ui/react"));
var import_layout = require("../../layout");
var import_styles = require("../../../styles");
function getColorsByIcon(colors) {
  const { warning } = colors;
  return {
    Warning: {
      round: { fg: warning.c80, bg: warning.c30 },
      square: { fg: warning.c80, bg: warning.c30 }
    }
  };
}
function getDefaultDefaultColors({ primary }) {
  return {
    round: { fg: primary.c90, bg: primary.c30 },
    square: { fg: primary.c80, bg: (0, import_styles.rgba)(primary.c80, 0.08) }
  };
}
function NotificationIcon({ icon, variant = "round" }) {
  var _a;
  const { colors } = (0, import_styled_components.useTheme)();
  const defaultColors = getDefaultDefaultColors(colors)[variant];
  const safeIcon = icon in Icons ? icon : "Information";
  const Icon = Icons[safeIcon];
  const { fg: iconColor = defaultColors.fg, bg: iconBgColor = defaultColors.bg } = ((_a = getColorsByIcon(colors)[safeIcon]) == null ? void 0 : _a[variant]) ?? {};
  return /* @__PURE__ */ import_react.default.createElement(Wrapper, { backgroundColor: iconBgColor, variant }, /* @__PURE__ */ import_react.default.createElement(Icon, { color: iconColor }));
}
const Wrapper = (0, import_styled_components.default)(import_layout.Box)`
  display: inline-flex;
  padding: 8px;
  ${(p) => p.variant === "square" ? squareWrapper : roundWrapper}
`;
const roundWrapper = import_styled_components.css`
  border-radius: 50%;
`;
const squareWrapper = import_styled_components.css`
  border-radius: 13.5px;
  background-clip: padding-box;
  border-width: 7px;
  border-style: solid;
  border-color: transparent;
  position: relative;

  ${(p) => import_styled_components.css`
    &::before,
    &::after {
      content: "";
      position: absolute;
      inset: -7px;
      border-radius: 13.5px;
      rotate: ${p.theme.colors.type === "dark" ? "0deg" : "180deg"};
    }
    &::before {
      background: linear-gradient(
        ${p.theme.colors.type === "dark" ? "rgba(255, 255, 255, 0.05)" : "rgba(29, 28, 31, 0.05)"}
          0%,
        rgba(29, 28, 31, 0) 100%
      );
    }
    &::after {
      content: ${p.theme.colors.type};
      border: solid 0.5px ${p.theme.colors.type === "dark" ? "#fff" : "rgba(0, 0, 0, 0.5)"};
      mask-image: linear-gradient(
        rgba(255, 255, 255, 0.15) 0%,
        rgba(255, 255, 255, 0.01) 60%,
        rgba(255, 255, 255, 0) 100%
      );
    }
  `};
`;
//# sourceMappingURL=NotificationIcon.js.map
