@kiwicom/smart-faq/src/FullPage/GlobalStyles.js

// @flow

import * as React from 'react';
import { ThemeConsumer } from 'styled-components';

const CommonStyles = ({ theme }) => (
  <style jsx global>
    {`
      .SmartFAQ {
        margin: auto;
        font-family: ${theme.orbit.fontFamily};
        display: flex;
        flex-flow: column;
        height: 100%;
      }

      #__next {
        height: 100%;
      }

      #__next > div {
        height: 100%;
      }

      html,
      body {
        height: 100%;
      }

      body {
        margin: 0;
        padding-bottom: 40px;
        box-sizing: border-box;
        background: ${theme.orbit.backgroundBody};
        font-family: 'Circular Pro', ${theme.orbit.fontFamily};
      }

      @media (max-width: 900px) {
        .SmartFAQ {
          margin: 0;
        }
      }

      @media (min-width: 901px) {
        body {
          padding-top: 92px;
        }

        .SmartFAQ {
          max-width: 740px;
        }
      }

      @media (min-width: 769px) and (max-width: 900px) {
        body {
          padding-top: 50px;
        }
      }

      @media (min-width: 769px) {
        [data-test='NavBar'] {
          z-index: 100;
        }
      }
    `}
  </style>
);

const GlobalStyles = () => (
  <ThemeConsumer>{theme => <CommonStyles theme={theme} />}</ThemeConsumer>
);

export default GlobalStyles;