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-family': fontFamily, palette: { 'foreground-color': foregroundColor }, '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};
    }
  `.join('');
};
export default createGlobalStyle(({ theme }) => {
    const { base: { 'custom-scrollbar': customScrollbar, 'border-radius': borderRadius, palette: { 'foreground-color': foreground, 'scrollbar-track': scrollbarTrack, 'scrollbar-thumb': scrollbarThumb, 'scrollbar-thumb-hover': scrollbarThumbHover }, 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-color: ${scrollbarThumb} ${scrollbarTrack};
        scrollbar-width: thin;
      }

      @supports not ((scrollbar-width: thin) or (scrollbar-color: black white)) {
        /* stylelint-disable unit-allowed-list */
        *::-webkit-scrollbar {
          width: 12px;
          height: 12px;
        }

        *::-webkit-scrollbar-track {
          background-color: ${scrollbarTrack};
        }

        *::-webkit-scrollbar-corner {
          background-color: ${scrollbarTrack};
          border-bottom-right-radius: inherit;
        }

        *::-webkit-scrollbar-thumb {
          background-color: transparent;
          border: 3px solid transparent;
          border-radius: calc(1.125 * ${borderRadius});
          box-shadow: inset 0 0 2px 4px ${scrollbarThumb};
        }

        *::-webkit-scrollbar-thumb:hover {
          box-shadow: inset 0 0 2px 4px ${scrollbarThumbHover};
        }

        *::-webkit-scrollbar-track:horizontal {
          border-bottom-left-radius: inherit;
        }

        *::-webkit-scrollbar-track:vertical {
          border-top-right-radius: inherit;
        }

        /* stylelint-disable-next-line selector-pseudo-class-no-unknown */
        *::-webkit-scrollbar-track:not(:corner-present) {
          border-bottom-right-radius: inherit;
        }
        /* stylelint-enable unit-allowed-list */
      }
    `}

    ${createGlobalRootStyles(theme)}

      ${createGlobalBodyStyles(theme)}

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