"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.GlobalStyles = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("@emotion/react");
const CssBaseline_1 = __importDefault(require("@mui/material/CssBaseline"));
const ScopedCssBaseline_1 = __importDefault(require("@mui/material/ScopedCssBaseline"));
const constants_1 = require("../constants");
const useTheme_1 = require("../theme/hooks/useTheme");
const GlobalStyles = ({ children, withScopedStyles = false, ...props }) => {
    const theme = (0, useTheme_1.useTheme)();
    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [withScopedStyles ? ((0, jsx_runtime_1.jsx)(ScopedCssBaseline_1.default, { ...props, children: children })) : ((0, jsx_runtime_1.jsx)(CssBaseline_1.default, { ...props, children: children })), (0, jsx_runtime_1.jsx)(react_1.Global, { styles: {
                    body: {
                        overflow: 'hidden',
                        height: '100vh',
                    },
                    '@supports (height: 100dvh)': {
                        body: {
                            height: '100dvh',
                        },
                    },
                    '#root': {
                        height: '100%',
                    },
                    html: {
                        fontSize: theme.typography.htmlFontSize,
                        [theme.breakpoints.down('sm')]: {
                            fontSize: 16,
                        },
                    },
                    '*::-webkit-scrollbar': {
                        width: constants_1.SCROLLBAR_SIZE,
                        height: constants_1.SCROLLBAR_SIZE,
                        backgroundColor: theme.palette.grey[100],
                        borderRadius: theme.shape.small,
                    },
                    '*::-webkit-scrollbar-thumb': {
                        borderRadius: theme.shape.small,
                        backgroundColor: theme.palette.grey[400],
                    },
                    '@-moz-document url-prefix()': {
                        '*': {
                            scrollbarWidth: 'thin',
                            scrollbarColor: `${theme.palette.grey[400]} ${theme.palette.grey[100]}`,
                        },
                    },
                } })] }));
};
exports.GlobalStyles = GlobalStyles;
