import { j as i } from "../../../../../_virtual/jsx-runtime.js";
import { useRef as p, useState as d, useEffect as l } from "react";
import { usePreviewMode as n } from "../../../../../use-editor.js";
import { tx as m, css as u } from "../../../../style-system/dist/twind.js";
function k({ children: r, ...s }) {
  const a = p(null), o = n(), [e, t] = d(!1);
  return l(() => {
    t(!1), setTimeout(() => {
      t(!0);
    }, 300);
  }, [o]), /* @__PURE__ */ i.jsx(
    "div",
    {
      id: "device-frame",
      ref: a,
      className: m(
        // The container class is important because it simulate the device frame viewport
        "@container relative transition-all duration-300 overscroll-contain overflow-y-auto",
        // styles[previewMode],
        {
          "!opacity-90": !e,
          "!opacity-100": e
        },
        u({
          maxHeight: o === "desktop" ? "auto" : "800px",
          maxWidth: o === "desktop" ? "auto" : "380px",
          minHeight: o === "desktop" ? "auto" : "800px",
          height: o === "desktop" ? "auto" : "94dvh",
          aspectRatio: o === "desktop" ? "16/9" : "9/19.5",
          borderRadius: o === "desktop" ? "0.5rem" : "24px",
          border: o === "desktop" ? "4px solid #111" : "none",
          outline: o === "desktop" ? "none" : "14px solid #111",
          minWidth: o === "desktop" ? "1224px" : "auto",
          width: "100%",
          // marginBlock: "auto",
          marginBottom: o === "desktop" ? ".4rem" : "auto",
          marginTop: o === "desktop" ? "0" : "auto",
          marginInline: o === "desktop" ? ".4rem" : "auto",
          boxShadow: o === "desktop" ? "1px solid rgba(0, 0, 0, 0.15)" : "0 0.5em 2em 0.2em rgba(0, 0, 0, 0.33), inset 0 0 0 0.5px #000",
          scrollbarColor: "var(--violet-4) var(--violet-2)",
          scrollBehavior: "smooth",
          scrollbarWidth: o === "desktop" ? "thin" : "none",
          "&:hover": {
            scrollbarColor: "var(--violet-7) var(--violet-3)"
          }
        })
        // bodyClasssName,
      ),
      ...s,
      children: r
    }
  );
}
export {
  k as default
};
//# sourceMappingURL=DeviceFrame.js.map
