text: /**
   * Copyright 2019, SumUp Ltd.
   * Licensed under the Apache License, Version 2.0 (the "License");
   * you may not use this file except in compliance with the License.
   * You may obtain a copy of the License at
   *
   * http://www.apache.org/licenses/LICENSE-2.0
   *
   * Unless required by applicable law or agreed to in writing, software
   * distributed under the License is distributed on an "AS IS" BASIS,
   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   * See the License for the specific language governing permissions and
   * limitations under the License.
   */
  
  import { css } from '@emotion/core';
  
  import { textMega } from '../../styles/style-helpers';
  
  import { RESETS } from './GlobalStylesConstants';
  
  export const createGlobalStyles = (theme, custom) => css`
    /* Use resets */
    ${RESETS};
  
    /* Our globals */
  
    /**
     * Best practice from http://callmenick.com/post/the-new-box-sizing-reset
     * TLDR: It’s easier to override and a slight performance boost.
     */
    *,
    *::before,
    *::after {
      box-sizing: inherit;
    }
  
    html {
      box-sizing: border-box;
  
      [type='button'] {
        appearance: none;
      }
    }
  
    body {
      background-color: ${theme.colors.bodyBg};
      color: ${theme.colors.bodyColor};
      ${textMega({ theme })};
    }
  
    /**
     * Form elements don't inherit font settings.
     * https://stackoverflow.com/questions/26140050/why-is-font-family-not-inherited-in-button-tags-automatically
     */
    html,
    body,
    input,
    select,
    optgroup,
    textarea,
    button {
      font-weight: ${theme.fontWeight.regular};
      font-family: ${theme.fontStack.default};
      font-feature-settings: 'kern';
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      overflow-x: hidden;
      text-rendering: optimizeLegibility;
    }
  
    pre,
    code {
      font-family: ${theme.fontStack.mono};
    }
  
    /**
     * Allow custom styles to override the default styles
     */
    ${custom};
  `;
  