import { EditorView } from '@codemirror/view'

export const shrimpTheme = EditorView.theme(
  {
    '&': {
      color: 'var(--text-editor)',
      backgroundColor: 'var(--bg-editor)',
      height: '100%',
      fontSize: '18px',
    },
    '.cm-content': {
      fontFamily: '"Pixeloid Mono", "Courier New", monospace',
      caretColor: 'var(--caret)',
      padding: '0px',
    },
    '&.cm-focused .cm-cursor': {
      borderLeftColor: 'var(--caret)',
    },
    '&.cm-focused .cm-selectionBackground, ::selection': {
      backgroundColor: 'var(--bg-selection)',
    },
    '.cm-editor': {
      border: 'none',
      outline: 'none',
      height: '100%',
    },
    '.cm-matchingBracket': {
      backgroundColor: 'var(--color-bool)',
    },
    '.cm-nonmatchingBracket': {
      backgroundColor: 'var(--color-string)',
    },
    '.cm-activeLine': {
      backgroundColor: 'var(--bg-active-line)',
    },
  },
  { dark: true }
)