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',
      borderTop: '1px solid var(--bg-editor)',
    },
    '&.cm-focused .cm-cursor': {
      borderLeftColor: 'var(--caret)',
    },
    '.cm-selectionLayer .cm-selectionBackground': {
      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: 'rgba(255, 255, 255, 0.03)',
    },

    // Token highlighting
    '.tok-keyword': { color: 'var(--color-keyword)' },
    '.tok-string': { color: 'var(--color-string)' },
    '.tok-number': { color: 'var(--color-number)' },
    '.tok-bool': { color: 'var(--color-bool)' },
    '.tok-null': { color: 'var(--color-number)', fontStyle: 'italic' },
    '.tok-identifier': { color: 'var(--color-function)' },
    '.tok-variable-def': { color: 'var(--color-variable-def)' },
    '.tok-comment': { color: 'var(--ansi-bright-black)', fontStyle: 'italic' },
    '.tok-operator': { color: 'var(--color-operator)' },
    '.tok-regex': { color: 'var(--color-regex)' },
  },
  { dark: true }
)