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

import {
  forDesktopUp,
  DisplayNone,
  DisplayBlock,
  forTabletUp,
  forPhoneOnly,
  forTabletDown,
  forTabletOnly
} from 'utils/styles/mixins'

export const ShowOnLarge: StyledComponent<any, any, any> = styled.div`
  ${DisplayNone};
  ${forDesktopUp(css`
    ${DisplayBlock};
  `)};
`;

export const ShowOnTabletDown: StyledComponent<any, any, any> = styled.div`
  ${DisplayNone};
  ${forTabletDown(css`
    ${DisplayBlock};
  `)};
`;

export const ShowOnTabletOnly: StyledComponent<any, any, any> = styled.div`
  ${DisplayNone};
  ${forTabletOnly(css`
    ${DisplayBlock};
  `)};
`;

export const ShowOnMedium: StyledComponent<any, any, any> = styled.div`
  ${DisplayNone};
  ${forTabletUp(css`
    ${DisplayBlock};
  `)};
`;

export const ShowOnSmall: StyledComponent<any, any, any> = styled.div`
  ${DisplayNone};
  ${forPhoneOnly(css`
    ${DisplayBlock};
  `)};
`;