"use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.UnsupportedFeatureScreen=void 0;const jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),styled_components_1=__importDefault(require("styled-components")),theme_1=require("@redocly/theme"),jotai_1=require("jotai"),app_1=require("../../jotai/app");function UnsupportedFeatureScreen(){const[e,t]=(0,jotai_1.useAtom)(app_1.unsupportedFeatureScreenAtom);return(0,react_1.useEffect)((()=>{document.body.style.overflow=e?"hidden":"auto"}),[e]),(0,jsx_runtime_1.jsxs)(Wrap,{showScreen:e,children:[(0,jsx_runtime_1.jsx)(Title,{children:"Unfortunately, this feature is not supported on mobile devices. For the best experience, please use a computer."}),(0,jsx_runtime_1.jsx)(theme_1.Button,{variant:"primary",onClick:()=>t(!1),children:"Ok"})]})}exports.UnsupportedFeatureScreen=UnsupportedFeatureScreen;const Wrap=styled_components_1.default.div`
  height: 100vh;
  width: 100vw;
  padding: var(--spacing-xxl);
  display: ${({showScreen:e})=>e?"flex":"none"};
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: var(--spacing-xl);
  background-color: var(--bg-color);
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-index-popover);
`,Title=(0,styled_components_1.default)(theme_1.Typography)`
  text-align: center;
`;
//# sourceMappingURL=UnsupportedFeatureScreen.js.map