import { mix } from 'polished';
import { createGlobalStyle, css } from 'styled-components';
import { calculateFontSize } from './utils';
export const globalSpacingStyles = css `
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
`;
export const createGlobalRootStyles = ({ base: { scale, 'hit-area': hitArea } }) => {
    return css `
    :root,
    :host {
      height: 100%;
      -webkit-text-size-adjust: 100%;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
      font-size: calc(${scale} * 1rem);
      --hit-area: ${hitArea.compact};

      @media (pointer: coarse) {
        --hit-area: ${hitArea.finger};
      }
    }
  `.join('');
};
export const createGlobalBodyStyles = ({ base: { 'font-size': baseFontSize, 'font-scale': baseFontScale, 'font-stretch': baseFontStretch, 'letter-spacing': baseLetterSpacing, 'font-family': fontFamily, palette: { 'foreground-color': foregroundColor, 'app-background': background }, 'line-height': lineHeight }, components: { text } }) => {
    // Can't call a hook here
    const fontSize = calculateFontSize(baseFontSize, baseFontScale);
    return css `
    body,
    :host {
      min-height: 100%;
      margin: 0;
      padding: 0;
      font-size: ${fontSize[text.primary['font-size']]};
      font-family: ${fontFamily};
      color: ${foregroundColor};
      line-height: ${lineHeight};
      font-stretch: ${baseFontStretch};
      letter-spacing: ${baseLetterSpacing};
    }

    body {
      background: ${background};
    }
  `.join('');
};
export default createGlobalStyle(({ theme }) => {
    const { base: { 'custom-scrollbar': customScrollbar, palette: { 'foreground-color': foreground }, shadow: { focus }, transparency: { 'transparent-3': transparent } }, components: { 'form-control': { 'background-color': backgroundColor } } } = theme;
    return css `
    ${globalSpacingStyles}

    body {
      overscroll-behavior: none;
    }

    h1:focus-visible,
    h2:focus-visible,
    h3:focus-visible,
    h4:focus-visible,
    h5:focus-visible,
    h6:focus-visible {
      outline: transparent;
      box-shadow: ${focus};
    }

    ::placeholder {
      color: ${mix(transparent, foreground, backgroundColor)};
      opacity: unset;
    }

    ${customScrollbar &&
        css `
      * {
        scrollbar-width: thin;
      }
    `}

    ${createGlobalRootStyles(theme)}

    ${createGlobalBodyStyles(theme)}

    input,
    button,
    select,
    optgroup,
    textarea {
      margin: 0;
      font-family: inherit;
      font-size: inherit;
      line-height: inherit;
    }
  `;
});
//# sourceMappingURL=GlobalStyle.js.map