import { h as e } from "./chunk.BlbRoQQ3.js";
import { v as t } from "./use-editor.C-_8sOOa.js";
import "./use-page-data.Cb2SuuwJ.js";
import "./chunk-LSPN22SI.D75E3zS-.js";
import { b as n, c as r } from "./twind.BiM9xcCd.js";
import { b as i } from "./jsx-runtime.DF4K5VCp.js";
import { useEffect as a, useRef as o, useState as s } from "react";
var c = /* @__PURE__ */ e(i());
function l({ children: e,...i }) {
	let l = o(null), u = t(), [d, f] = s(!1);
	return a(() => {
		f(!1), setTimeout(() => {
			f(!0);
		}, 300);
	}, [u]), /* @__PURE__ */ (0, c.jsx)("div", {
		id: "device-frame",
		ref: l,
		className: r("@container relative transition-all duration-300 overscroll-contain overflow-y-auto", {
			"!opacity-90": !d,
			"!opacity-100": d
		}, n({
			maxHeight: u === "desktop" ? "auto" : "800px",
			maxWidth: u === "desktop" ? "auto" : "380px",
			minHeight: u === "desktop" ? "auto" : "800px",
			height: u === "desktop" ? "auto" : "94dvh",
			aspectRatio: u === "desktop" ? "16/9" : "9/19.5",
			borderRadius: u === "desktop" ? "0.5rem" : "24px",
			border: u === "desktop" ? "4px solid #111" : "none",
			outline: u === "desktop" ? "none" : "14px solid #111",
			minWidth: u === "desktop" ? "1224px" : "auto",
			width: "100%",
			marginBottom: u === "desktop" ? ".4rem" : "auto",
			marginTop: u === "desktop" ? "0" : "auto",
			marginInline: u === "desktop" ? ".4rem" : "auto",
			boxShadow: u === "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: u === "desktop" ? "thin" : "none",
			"&:hover": { scrollbarColor: "var(--violet-7) var(--violet-3)" }
		})),
		...i,
		children: e
	});
}
export { l as default };

//# sourceMappingURL=DeviceFrame.BtzsDnbI.js.map