import {
  z
} from "./chunk-55OQPFLF.js";
import {
  overlaySurface
} from "./chunk-JK4BP73A.js";
import {
  __spreadProps,
  __spreadValues
} from "./chunk-CIGAQ47A.js";

// src/components/LightTooltip.tsx
import { css } from "@emotion/css";
import { useTheme } from "@emotion/react";
import React, { useEffect, useRef } from "react";
import ReactDOM from "react-dom";
import { Tooltip } from "react-tooltip";
import { jsx } from "@emotion/react/jsx-runtime";
function LightTooltip(props) {
  const nodeRef = useRef(null);
  const [nodeReady, setNodeReady] = React.useState(false);
  useEffect(() => {
    if (!nodeRef.current) {
      nodeRef.current = document.createElement("div");
      document.body.appendChild(nodeRef.current);
    }
    setNodeReady(true);
    return () => {
      if (nodeRef.current) {
        document.body.removeChild(nodeRef.current);
        nodeRef.current = null;
      }
    };
  }, []);
  const theme = useTheme();
  console.log("LightTooltip.tsx: tooltipProps:", props);
  return nodeReady && nodeRef.current ? ReactDOM.createPortal(
    /* @__PURE__ */ jsx(
      Tooltip,
      __spreadProps(__spreadValues({}, props), {
        id: props.id || "",
        content: props.content || "",
        noArrow: true,
        border: "0.05rem solid rgba(0, 0, 0, 0.1)",
        className: styles({ theme }),
        variant: "light",
        delayShow: 180
      })
    ),
    nodeRef.current
  ) : null;
}
var styles = ({ theme }) => css`
  font-size: "10px",
  color: ${theme.c2Neutral};
  border-radius: 8px !important;
  padding: 16px !important;
  z-index: ${z.tooltip};
  ${overlaySurface({ theme, important: true })};

  max-width: 260px;
  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.10), 0px 4px 8px 0px rgba(0, 0, 0, 0.08) !important;
`;

export {
  LightTooltip
};
