global.js

import { createGlobalStyle, css } from 'styled-components';
import 'font-awesome/css/font-awesome.css';
import './UI-v1/main.scss';

import Auth from '../services/auth';

const GlobalStyle = createGlobalStyle`
  ${Auth().guest
    && css`
      body {
        /* o-page */
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
      }

      @media screen and (max-width: 768px) {
        #root {
          margin: 0 !important;
          padding: 0 !important;
          width: 100% !important;
        }

        .o-page__card--horizontal {
          margin: 0 !important;
          padding: 0 !important;
          width: 97%;
        }

        .login {
        }

        .login-logo {
          display: none !important;
        }
      }
    `};


  ${Auth().authenticated
    && css`
      footer {
        width: 100%;
      }
    `};
`;

export default GlobalStyle;