import styled, { StyledComponent } from '@emotion/styled';
import { css } from '@emotion/core';

import { forDesktopUp, forPhoneOnly } from 'utils/styles/mixins'

export const GlobalLayout: any = css`
  img {
    width: 100%;
  }
`;

export const Layout: any = styled.div`
  flex-grow: 1;
`;

export const FullHeightContainer: any = styled.div`
  ${forDesktopUp(css`
    display: flex;
    min-height: 100vh;
    flex-direction: column;
  `)};
`;

export const ContentContainer: StyledComponent<any, any, any> = styled.div`
  position: relative;
  width: ${(props: any) => props.usePercentageWidth ? '100%' : '100vw'};
  padding-top: ${(props: any) => props.contentTopMargin}px;
  ${forPhoneOnly(css`
    position: static;
    width: 100vw;
  `)};
`