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

import { forDesktopUp, forTabletOnly } from 'utils/styles/mixins';
import { getColumnSize } from 'utils/styles/grid';
import { widths } from 'utils/theme';

export const Copy = css`
  font-style: italic;
`

export const QuoteContainer: StyledComponent<any, any, any> = styled(Box)`
  ${forTabletOnly(css`
    max-width: ${getColumnSize(8)}px;
    margin-left: auto;
    margin-right: auto;
  `)};
  ${forDesktopUp(css`
    max-width: ${getColumnSize(8)}px;
    margin-left: ${getColumnSize(2) + widths.gutterWidth}px;
  `)};
`;