// @ts-ignore
import _get from 'lodash/get';

export default ({ palette }: { palette: { [key: string]: string } }) => ({
  'code[class*="language-"]': {
    color: _get(palette, 'text'),
    background: 'none',
    fontFamily: "Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",
    textAlign: 'left',
    whiteSpace: 'pre',
    wordSpacing: 'normal',
    wordBreak: 'normal',
    wordWrap: 'normal',
    lineHeight: '1.5',
    MozTabSize: '4',
    OTabSize: '4',
    tabSize: '4',
    WebkitHyphens: 'none',
    MozHyphens: 'none',
    msHyphens: 'none',
    hyphens: 'none'
  },
  'pre[class*="language-"]': {
    color: _get(palette, 'text'),
    background: 'none',
    fontFamily: "Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",
    textAlign: 'left',
    whiteSpace: 'pre',
    wordSpacing: 'normal',
    wordBreak: 'normal',
    wordWrap: 'normal',
    lineHeight: '1.5',
    MozTabSize: '4',
    OTabSize: '4',
    tabSize: '4',
    WebkitHyphens: 'none',
    MozHyphens: 'none',
    msHyphens: 'none',
    hyphens: 'none',
    position: 'relative',
    margin: '.5em 0',
    overflow: 'visible',
    padding: '0',
    backgroundColor: '#fdfdfd',
    WebkitBoxSizing: 'border-box',
    MozBoxSizing: 'border-box',
    boxSizing: 'border-box',
    marginBottom: '1em'
  },
  'pre[class*="language-"]>code': {
    position: 'relative',
    borderLeft: '10px solid #358ccb',
    boxShadow: '-1px 0px 0px 0px #358ccb, 0px 0px 0px 1px #dfdfdf',
    backgroundColor: '#fdfdfd',
    backgroundImage: 'linear-gradient(transparent 50%, rgba(69, 142, 209, 0.04) 50%)',
    backgroundSize: '3em 3em',
    backgroundOrigin: 'content-box',
    backgroundAttachment: 'local'
  },
  'code[class*="language"]': {
    maxHeight: 'inherit',
    height: 'inherit',
    padding: '0 1em',
    display: 'block',
    overflow: 'auto'
  },
  ':not(pre) > code[class*="language-"]': {
    backgroundColor: '#fdfdfd',
    WebkitBoxSizing: 'border-box',
    MozBoxSizing: 'border-box',
    boxSizing: 'border-box',
    marginBottom: '1em',
    position: 'relative',
    padding: '.2em',
    borderRadius: '0.3em',
    color: _get(palette, 'primary'),
    border: '1px solid rgba(0, 0, 0, 0.1)',
    display: 'inline',
    whiteSpace: 'normal'
  },
  'pre[class*="language-"]:before': {
    content: "''",
    zIndex: '-2',
    display: 'block',
    position: 'absolute',
    bottom: '0.75em',
    left: '0.18em',
    width: '40%',
    height: '20%',
    maxHeight: '13em',
    boxShadow: '0px 13px 8px #979797',
    WebkitTransform: 'rotate(-2deg)',
    MozTransform: 'rotate(-2deg)',
    msTransform: 'rotate(-2deg)',
    OTransform: 'rotate(-2deg)',
    transform: 'rotate(-2deg)'
  },
  'pre[class*="language-"]:after': {
    content: "''",
    zIndex: '-2',
    display: 'block',
    position: 'absolute',
    bottom: '0.75em',
    left: 'auto',
    width: '40%',
    height: '20%',
    maxHeight: '13em',
    boxShadow: '0px 13px 8px #979797',
    WebkitTransform: 'rotate(2deg)',
    MozTransform: 'rotate(2deg)',
    msTransform: 'rotate(2deg)',
    OTransform: 'rotate(2deg)',
    transform: 'rotate(2deg)',
    right: '0.75em'
  },
  ':not(pre) > code[class*="language-"]:after': {
    right: '0.75em',
    left: 'auto',
    WebkitTransform: 'rotate(2deg)',
    MozTransform: 'rotate(2deg)',
    msTransform: 'rotate(2deg)',
    OTransform: 'rotate(2deg)',
    transform: 'rotate(2deg)'
  },
  comment: {
    color: '#7D8B99'
  },
  'block-comment': {
    color: '#7D8B99'
  },
  prolog: {
    color: '#7D8B99'
  },
  doctype: {
    color: '#7D8B99'
  },
  cdata: {
    color: '#7D8B99'
  },
  punctuation: {
    color: '#5F6364'
  },
  property: {
    color: _get(palette, 'primary')
  },
  tag: {
    color: _get(palette, 'primary')
  },
  boolean: {
    color: _get(palette, 'primary')
  },
  number: {
    color: _get(palette, 'primary')
  },
  'function-name': {
    color: _get(palette, 'primary')
  },
  constant: {
    color: _get(palette, 'primary')
  },
  symbol: {
    color: _get(palette, 'primary')
  },
  deleted: {
    color: _get(palette, 'primary')
  },
  selector: {
    color: _get(palette, 'primary')
  },
  'attr-name': {
    color: _get(palette, 'secondary')
  },
  string: {
    color: _get(palette, 'text')
  },
  char: {
    color: _get(palette, 'primary')
  },
  function: {
    color: _get(palette, 'primary')
  },
  builtin: {
    color: _get(palette, 'primary')
  },
  inserted: {
    color: _get(palette, 'primary')
  },
  operator: {
    color: '#a67f59'
  },
  entity: {
    color: '#a67f59',
    cursor: 'help'
  },
  url: {
    color: '#a67f59'
  },
  variable: {
    color: '#a67f59'
  },
  atrule: {
    color: _get(palette, 'secondary')
  },
  'attr-value': {
    color: _get(palette, 'text')
  },
  keyword: {
    color: _get(palette, 'secondary')
  },
  'class-name': {
    color: _get(palette, 'secondary')
  },
  regex: {
    color: '#e90'
  },
  important: {
    color: '#e90',
    fontWeight: 'normal'
  },
  '.language-css .token.string': {
    color: '#a67f59'
  },
  '.style .token.string': {
    color: '#a67f59'
  },
  bold: {
    fontWeight: 'bold'
  },
  italic: {
    fontStyle: 'italic'
  },
  '.namespace': {
    Opacity: '.7'
  },
  'tab:not(:empty):before': {
    color: '#e0d7d1'
  },
  'cr:before': {
    color: '#e0d7d1'
  },
  'lf:before': {
    color: '#e0d7d1'
  },
  'pre[class*="language-"].line-numbers': {
    paddingLeft: '0'
  },
  'pre[class*="language-"].line-numbers code': {
    paddingLeft: '3.8em'
  },
  'pre[class*="language-"].line-numbers .line-numbers-rows': {
    left: '0'
  },
  'pre[class*="language-"][data-line]': {
    paddingTop: '0',
    paddingBottom: '0',
    paddingLeft: '0'
  },
  'pre[data-line] code': {
    position: 'relative',
    paddingLeft: '4em'
  },
  'pre .line-highlight': {
    marginTop: '0'
  }
});