import { withStyles } from '@material-ui/core/styles';
import MuiCard from '@material-ui/core/Card';
import MuiCardContent from '@material-ui/core/CardContent';

import cx from 'clsx';

export function Card(props) {
  return <MuiCard elevation={0} {...props} />;
}

export const CardHeader = withStyles(theme => ({
  root: {
    margin: '0 16px',
    padding: '12px 0 8px',
    fontSize: 12,
    lineHeight: '20px',
    fontWeight: 700,
    letterSpacing: 0.25,
    color: theme.palette.secondary[500],
    borderBottom: `1px solid ${theme.palette.secondary[500]}`,

    [theme.breakpoints.up('md')]: {
      margin: '0 36px',
      padding: '20px 0 12px',
      fontSize: 14,
    },
  },
}))(({ classes, children, className, ...props }) => {
  return (
    <header className={cx(classes.root, className)} {...props}>
      {children}
    </header>
  );
});

export const CardContent = withStyles(theme => ({
  root: {
    // Card has 16px padding in mobile already
    [theme.breakpoints.up('md')]: {
      padding: '20px 36px 24px',
    },
  },
}))(MuiCardContent);

@@ -183,46 +183,256 @@
 ';%0A%0A
-export function Card(props) %7B%0A  return
+/**%0A * Provides custom CSS property --horizontal-padding%0A */%0Aexport const Card = withStyles(theme =%3E (%7B%0A  root: %7B%0A    '--horizontal-padding': '16px',%0A    %5Btheme.breakpoints.up('md')%5D: %7B%0A      '--horizontal-padding': '36px',%0A    %7D,%0A  %7D,%0A%7D))(props =%3E
  %3CMu
@@ -464,19 +464,18 @@
 rops%7D /%3E
+)
 ;
-%0A%7D
 %0A%0Aexport
@@ -542,20 +542,41 @@
 gin: '0 
-16px
+var(--horizontal-padding)
 ',%0A    p
@@ -830,32 +830,8 @@
 : %7B%0A
-      margin: '0 36px',%0A
     
@@ -1126,50 +1126,50 @@
     
-// Card has 16px padding in mobile already
+padding: '16px var(--horizontal-padding)',
 %0A   
@@ -1222,20 +1222,41 @@
 : '20px 
-36px
+var(--horizontal-padding)
  24px',%0A

add --horizontal-padding custom property so that contents within Cards can use var(--horizontal-padding)