import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{useEffect}from"react";import styled from"styled-components";import{Button,Typography}from"@redocly/theme";import{useAtom}from"jotai";import{unsupportedFeatureScreenAtom}from"../../jotai/app";export function UnsupportedFeatureScreen(){const[e,t]=useAtom(unsupportedFeatureScreenAtom);return useEffect((()=>{document.body.style.overflow=e?"hidden":"auto"}),[e]),_jsxs(Wrap,{showScreen:e,children:[_jsx(Title,{children:"Unfortunately, this feature is not supported on mobile devices. For the best experience, please use a computer."}),_jsx(Button,{variant:"primary",onClick:()=>t(!1),children:"Ok"})]})}const Wrap=styled.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=styled(Typography)`
  text-align: center;
`;
//# sourceMappingURL=UnsupportedFeatureScreen.js.map