module.exports = (theme) => ({
  StyleGuide: {
    '@global a': {
      wordBreak: 'break-all !important'
    },
    '@global abbr[title]': {
      textDecoration: 'underline wavy',
    },
    '@font-face': {
      fontFamily: 'Domine',
      fontStyle: 'normal',
      fontWeight: 700,
      fontDisplay: 'swap',
      src: 'local("Domine Bold"), local("Domine Bold"), url(https://res.cloudinary.com/strich/raw/upload/v1599324278/Domine-Bold_cngxfy.ttf)'
    },
  },
  List: {
    li: {
      color: theme.color.base,
      '.dark &': {
        isolate: false,
        color: '#eee'
      }
    }
  },
  Text: {
    baseColor: {
      color: theme.color.base,
      '.dark &': {
        isolate: false,
        color: '#eee'
      }
    },
  },
  Table: {
    table: {
      width: '100%',
    },
    cellHeading: {
      padding: '10px',
      '.dark &': {
        isolate: false,
        color: '#ddd',
      }
    },
    cell: {
      padding: '10px',
      '.dark &': {
        isolate: false,
        color: '#eee',
      }
    },
    tableHead: {
      isolate: false,
      padding: '10px',
      '.dark &': {
        isolate: false,
        borderBottom: [[1, '#333', 'solid']]
      }
    },
  },
  TableCell: {
    td: {
      padding: '10px',
      borderBottom: 'solid thin #eee',
      '.dark &': {
        isolate: false,
        color: '#eee',
        borderColor: '#333',
      }
    },
    th: {
      padding: '10px',
      backgroundColor: '#fafafa',
      '.dark &': {
        isolate: false,
        color: '#eee',
        backgroundColor: '#3c3c3c',
      }
    }
  },
  Para: {
    para: {
      '.dark &': {
        isolate: false,
        color: '#eee',
      },
    }
  },
  Playground: {
    preview: {
      '.dark &': {
        isolate: false,
        border: [[1, '#333', 'solid']],
        color: '#eee'
      }
    },
  },
  Editor: {
    root: {
      '& textarea': {
        '.dark &': {
          isolate: false,
          border: 'solid thin #333 !important',
          '&:focus': {
            isolate: false,
            borderColor: `${theme.color.link} !important`,
          },
        }
      }
    }
  },
})