import { WHITE, ISABELLINE, ONYX, RED_ORANGE } from '@vincent_za/styles';

export default {
  button: {
    base: {
      fontFamily: 'sans-serif',
      fontSize: '12px',
      display: 'block',
      position: 'fixed',
      border: 'none',
      background: '#027ac5',
      color: WHITE,
      padding: '5px 15px',
      cursor: 'pointer',
    },
    topRight: {
      top: 0,
      right: 0,
      borderRadius: '0 0 0 5px',
    },
  },
  info: {
    position: 'fixed',
    background: 'red',
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
    padding: '0 40px',
    overflow: 'auto',
    zIndex: 99999,
  },
  children: {
    position: 'relative',
    zIndex: 0,
  },
  infoBody: {
    fontFamily: 'Helvetica Neue, Helvetica, Segoe UI, Arial, freesans, sans-serif',
    color: ONYX,
    fontWeight: 'normal',
    lineHeight: 'normal',
    fontSize: '14px',
    border: '0px solid red',
    padding: '24px',
    borderRadius: 0,
    backgroundColor: 'transparent',
    marginTop: 0,
    marginBottom: 0,
  },
  infoContent: {
    paddingBottom: '24px',
    fontSize: '14px',
    color: RED_ORANGE,
  },
  infoStory: {
    padding: '0 24px',
  },
  jsxInfoContent: {
    borderTop: '10px solid red',
    margin: '20px 0 0 0',
  },
  header: {
    h1: {
      display: 'none',
    },
    h2: {
      marginBottom: '4px',
      padding: 0,
      fontSize: '22px',
      fontWeight: 'normal',
    },
    h3: {
      margin: '0 0 10px 0',
      padding: 0,
      fontSize: '18px',
      fontWeight: 'normal',
    },
    body: {
      borderBottom: `1px solid ${ISABELLINE}`,
      paddingTop: 0,
      marginBottom: 0,
    },
  },
  source: {
    h1: {
      display: 'none',
    },
  },
  propTableHead: {
    borderBottom: '1px solid #e0e0e0',
    marginTop: '40px',
    paddingBottom: '8px',
    fontSize: '12px',
    color: '#777',
    textTransform: 'uppercase',
  },
};
