import React from 'react'
import styled from 'styled-components'
import jss from 'jss'
import { onMobile, onTablet } from 'mqcss'
 
// styled-components
// Different border on mobile & table
const Wrapper = styled.div`
  border: 1px solid black;
  padding: ${p => toPx(p.padding) || '10px'};
  > * { margin: 0 5px; }
 
  ${onMobile} {
    border: 1px solid red;
  }
 
  ${onTablet} {
    border: 1px solid blue;
  }
`
// jss
// smaller font size on mobile
const styles = {
  button: {
    fontSize: 12,
    [onMobile]: {
      fontSize: 8
    }
  }
}
 
const {classes} = jss.createStyleSheet(styles).attach()