import {
  cssVars
} from "./chunk-SLEBHXIK.js";
import {
  rootFontSizeRems,
  standardLineHeightEms
} from "./chunk-HGZGGJQB.js";
import {
  useThemeBg
} from "./chunk-VAH342U2.js";
import {
  bp
} from "./chunk-JSGRNWSB.js";

// src/styles/global.tsx
import { css, Global, useTheme } from "@emotion/react";
import { useEffect } from "react";
import "react-tooltip/dist/react-tooltip.css";
import "./static/fonts.css";
import { jsx } from "@emotion/react/jsx-runtime";
var getFontImport = (theme) => {
  let importStr = "";
  const fontStrs = [];
  const interStr = "Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900";
  const manropeStr = "Manrope:wght@200..800";
  const montserratStr = "Montserrat:ital,wght@0,100..900;1,100..900";
  const robotoMonoStr = "Roboto+Mono:ital,wght@0,100..700;1,100..700";
  const suisseIntlStr = "Suisse+Intl:wght@100..900";
  const suisseIntlMonoStr = "Suisse+Intl+Mono:wght@100..900";
  if (theme.typography.fontFamilies.main === "Inter") {
    fontStrs.push(interStr);
  } else if (theme.typography.fontFamilies.main === "Manrope") {
    fontStrs.push(manropeStr);
  } else if (theme.typography.fontFamilies.main === "Montserrat") {
    fontStrs.push(montserratStr);
  } else if (theme.typography.fontFamilies.main === "SuisseIntl") {
    fontStrs.push(suisseIntlStr);
  }
  if (theme.typography.fontFamilies.code === "Roboto Mono") {
    fontStrs.push(robotoMonoStr);
  } else if (theme.typography.fontFamilies.code === "SuisseIntl-Mono") {
    fontStrs.push(suisseIntlMonoStr);
  }
  if (fontStrs.length) {
    importStr = `@import url('https://fonts.googleapis.com/css2?family=${fontStrs.join(
      "&family="
    )}&display=swap');`;
  }
  return importStr;
};
var getFontFaces = (theme) => {
  let fontFacesStr = "";
  if (theme.typography.fontFamilies.main === "SuisseIntl") {
    fontFacesStr += `
      @font-face {
        font-family: "SuisseIntl";
        src: url("/fonts/SuisseIntl-Light.woff2") format("woff2");
        font-weight: 300;
        font-style: normal;
        font-display: swap;
      }
      @font-face {
        font-family: "SuisseIntl";
        src: url("/fonts/SuisseIntl-Regular.woff2") format("woff2");
        font-weight: 400;
        font-style: normal;
        font-display: swap;
      }
      @font-face {
        font-family: "SuisseIntl";
        src: url("/fonts/SuisseIntl-Book.woff2") format("woff2");
        font-weight: 450;
        font-style: normal;
        font-display: swap;
      }
      @font-face {
        font-family: "SuisseIntl";
        src: url("/fonts/SuisseIntl-Medium.woff2") format("woff2");
        font-weight: 500;
        font-style: normal;
        font-display: swap;
      }
      @font-face {
        font-family: "SuisseIntl";
        src: url("/fonts/SuisseIntl-Semibold.woff2") format("woff2");
        font-weight: 600;
        font-style: normal;
        font-display: swap;
      }
      @font-face {
        font-family: "SuisseIntl";
        src: url("/fonts/SuisseIntl-Bold.woff2") format("woff2");
        font-weight: 700;
        font-style: normal;
        font-display: swap;
      }
    `;
  }
  if (theme.typography.fontFamilies.code === "SuisseIntl-Mono") {
    fontFacesStr += `
      @font-face {
        font-family: "SuisseIntl-Mono";
        src: url("/fonts/SuisseIntlMono-Regular.woff2") format("woff2");
        font-weight: 400;
        font-style: normal;
        font-display: swap;
      }
    `;
  }
  return fontFacesStr;
};
var globalComponentStyles = ({ theme }) => css`
  ${getFontImport(theme)};
  ${getFontFaces(theme)};

  html {
    font-size: ${rootFontSizeRems}rem;
    color: ${theme.text};

    /* required for iOS https://bit.ly/3Q8syG8 */
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    scroll-behavior: smooth;
  }

  body {
    font-family: ${theme.typography.fontFamilies.main}, sans-serif;
    font-weight: 500;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    &:before {
      position: absolute;
      visibility: hidden;
    }

    ${bp.sm(`&:before { content: "${"sm" /* sm */}"; }`)}
    ${bp.minSmMaxMd(`&:before { content: "${"minSmMaxMd" /* minSmMaxMd */}"; }`)}
      ${bp.minMdMaxLg(
  `&:before { content: "${"minMdMaxLg" /* minMdMaxLg */}"; }`
)}
    ${bp.lg(`&:before { content: "${"lg" /* lg */}"; }`)}
  }

  * {
    box-sizing: border-box;
    line-height: ${standardLineHeightEms}em;
  }

  code {
    font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
      monospace;
  }

  a {
    color: #0d6efd;
    text-decoration: none;
  }

  .pretty-scrollbar {
    scrollbar-width: auto;
    scrollbar-color: #333333 #000000;
  }

  .pretty-scrollbar::-webkit-scrollbar {
    width: 16px;
  }

  .pretty-scrollbar::-webkit-scrollbar-track {
    background: #000000;
  }

  .pretty-scrollbar::-webkit-scrollbar-thumb {
    background-color: #333333;
    border-radius: 10px;
    border: 3px solid #000000;
  }

  *:focus-visible {
    outline: ${theme.hcNeutral} dashed 1px;
  }

  strong {
    font-weight: 700;
  }

  // Recaptcha badge invisibility
  .grecaptcha-badge {
    visibility: hidden;
  }
`;
function GlobalStyles() {
  const theme = useTheme();
  const bg = useThemeBg();
  useEffect(() => {
    const documentHeight = () => {
      const doc = document.documentElement;
      doc.style.setProperty(cssVars.docHeight, `${window.innerHeight}px`);
    };
    window.addEventListener("resize", documentHeight);
    documentHeight();
    return () => window.removeEventListener("resize", documentHeight);
  }, []);
  const globalStyles = css`
    ${globalComponentStyles({ theme })}

    :root {
      ${cssVars.docHeight}: 100vh;
      --rt-opacity: 1 !important;
      --rt-transition-show-delay: 0.15s !important;
      --rt-transition-closing-delay: 0.2s !important;
    }

    html {
      background: ${bg};
    }

    body {
      height: 100%;
      margin: 0;
      min-height: var(${cssVars.docHeight});
      overflow-x: hidden;
      overflow-y: auto;
      overscroll-behavior: auto;
    }

    [id="root"] {
      height: 100%;
    }
  `;
  return /* @__PURE__ */ jsx(Global, { styles: globalStyles });
}

export {
  globalComponentStyles,
  GlobalStyles
};
