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

import typography from 'utils/typography';
import theme, { breakpoints } from 'utils/theme';
import { forTabletUp } from 'utils/styles/mixins';

export const Footer: StyledComponent<any, any, any>  = styled.footer`
  ${forTabletUp(css`
    margin-top: ${theme.space[4]}px;
  `)};
  font-family:
    ${(props): any => props.useHeadingFont
      ? typography.options.headerFontFamily!.join()
      : typography.options.bodyFontFamily!.join()
    };

  @media (min-width: ${breakpoints.small}) {
    margin-top: 0;
  }
`;