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

// @flow

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

type Props = {|
  theme: Object,
|};

const GlobalStyles = ({ theme }: Props) => (
  <style
    dangerouslySetInnerHTML={{
      __html: `
      .smartFAQ {
        position: fixed;
        min-width: 480px;
        top: 0;
        bottom: 0;
        right: 0;
        background-color: ${theme.orbit.backgroundModal};
        font-family: ${theme.orbit.fontFamily};
      }
      .smartFAQ * {
        box-sizing: border-box;
        font-family: ${theme.orbit.fontFamily};
      }
      @media only screen and (max-width: 901px) {
        .smartFAQ {
          min-width: 100%;
        }
      }
    `,
    }}
  />
);

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

export default ThemedGlobalStyles;