text: import styled from 'styled-components';
  
  /* eslint-disable */
  /* stylelint-disable */
  export const EditorStylesContainer = styled.div`
    cursor: ${({ disabled }) => (disabled ? 'not-allowed !important' : 'auto')};
    height: 100%;
    /* BASICS */
    .CodeMirror-placeholder {
      color: ${({ theme }) => theme.colors.neutral600} !important;
    }
  
    .CodeMirror {
      /* Set height, width, borders, and global font properties here */
      font-size: ${14 / 16}rem;
      height: ${({ isExpandMode }) => (isExpandMode ? '100%' : '290px')};
      color: ${({ theme }) => theme.colors.neutral800};
      direction: ltr;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
        'Open Sans', 'Helvetica Neue', sans-serif;
    }
  
    /* PADDING */
  
    .CodeMirror-lines {
      padding: ${({ theme }) => `${theme.spaces[3]} ${theme.spaces[4]}`};
      /* Vertical padding around content */
    }
  
    .CodeMirror-scrollbar-filler,
    .CodeMirror-gutter-filler {
      /* The little square between H and V scrollbars */
      background-color: ${({ theme }) => `${theme.colors.neutral0}`};
    }
  
    /* GUTTER */
  
    .CodeMirror-gutters {
      border-right: 1px solid #ddd;
      background-color: #f7f7f7;
      white-space: nowrap;
    }
    .CodeMirror-linenumbers {
    }
    .CodeMirror-linenumber {
      padding: 0 3px 0 5px;
      min-width: 20px;
      text-align: right;
      color: #999;
      white-space: nowrap;
    }
  
    .CodeMirror-guttermarker {
      color: black;
    }
    .CodeMirror-guttermarker-subtle {
      color: #999;
    }
  
    /* CURSOR */
  
    .CodeMirror-cursor {
      border-left: 1px solid black;
      border-right: none;
      width: 0;
    }
    /* Shown when moving in bi-directional text */
    .CodeMirror div.CodeMirror-secondarycursor {
      border-left: 1px solid silver;
    }
    .cm-fat-cursor .CodeMirror-cursor {
      width: auto;
      border: 0 !important;
      background: #7e7;
    }
    .cm-fat-cursor div.CodeMirror-cursors {
      /* z-index: 1; */
    }
  
    .cm-fat-cursor-mark {
      background-color: rgba(20, 255, 20, 0.5);
      -webkit-animation: blink 1.06s steps(1) infinite;
      -moz-animation: blink 1.06s steps(1) infinite;
      animation: blink 1.06s steps(1) infinite;
    }
    .cm-animate-fat-cursor {
      width: auto;
      border: 0;
      -webkit-animation: blink 1.06s steps(1) infinite;
      -moz-animation: blink 1.06s steps(1) infinite;
      animation: blink 1.06s steps(1) infinite;
      background-color: #7e7;
    }
  
    /* Can style cursor different in overwrite (non-insert) mode */
    .CodeMirror-overwrite .CodeMirror-cursor {
    }
  
    .cm-tab {
      display: inline-block;
      text-decoration: inherit;
    }
  
    .CodeMirror-rulers {
      position: absolute;
      left: 0;
      right: 0;
      top: -50px;
      bottom: 0;
      overflow: hidden;
    }
    .CodeMirror-ruler {
      border-left: 1px solid #ccc;
      top: 0;
      bottom: 0;
      position: absolute;
    }
  
    /* DEFAULT THEME */
  
    .cm-header,
    .cm-strong {
      font-weight: bold;
    }
    .cm-em {
      font-style: italic;
    }
    .cm-link {
      text-decoration: underline;
    }
    .cm-strikethrough {
      text-decoration: line-through;
    }
  
    .CodeMirror-composing {
      border-bottom: 2px solid;
    }
  
    /* Default styles for common addons */
  
    div.CodeMirror span.CodeMirror-matchingbracket {
      color: #0b0;
    }
    div.CodeMirror span.CodeMirror-nonmatchingbracket {
      color: #a22;
    }
    .CodeMirror-matchingtag {
      background: rgba(255, 150, 0, 0.3);
    }
    .CodeMirror-activeline-background {
      background: #e8f2ff;
    }
  
    /* STOP */
  
    /* The rest of this file contains styles related to the mechanics of
      the editor. You probably shouldn't touch them. */
  
    .CodeMirror {
      position: relative;
      overflow: hidden;
      background: ${({ theme }) => `${theme.colors.neutral0}`};
    }
  
    .CodeMirror-scroll {
      overflow: scroll !important; /* Things will break if this is overridden */
      /* 50px is the magic margin used to hide the element's real scrollbars */
      /* See overflow: hidden in .CodeMirror */
      margin-bottom: -50px;
      margin-right: -50px;
      padding-bottom: 50px;
      height: 100%;
      outline: none; /* Prevent dragging from highlighting the element */
      position: relative;
    }
    .CodeMirror-sizer {
      position: relative;
      border-right: 50px solid transparent;
    }
  
    /* The fake, visible scrollbars. Used to force redraw during scrolling
      before actual scrolling happens, thus preventing shaking and
      flickering artifacts. */
    .CodeMirror-vscrollbar,
    .CodeMirror-hscrollbar,
    .CodeMirror-scrollbar-filler,
    .CodeMirror-gutter-filler {
      position: absolute;
      z-index: 1;
      display: none;
      outline: none;
    }
  
    .CodeMirror-vscrollbar {
      right: 0;
      top: 0;
      overflow-x: hidden;
      overflow-y: scroll;
    }
    .CodeMirror-hscrollbar {
      bottom: 0;
      left: 0;
      overflow-y: hidden;
      overflow-x: scroll;
    }
    .CodeMirror-scrollbar-filler {
      right: 0;
      bottom: 0;
    }
  
    .CodeMirror-lines {
      cursor: text;
      min-height: 1px; /* prevents collapsing before first draw */
    }
    /* Reset some styles that the rest of the page might have set */
    .CodeMirror pre.CodeMirror-line,
    .CodeMirror pre.CodeMirror-line-like {
      -moz-border-radius: 0;
      -webkit-border-radius: 0;
      border-radius: 0;
      border-width: 0;
      background: transparent;
      font-family: inherit;
      font-size: inherit;
      margin: 0;
      white-space: pre;
      word-wrap: normal;
      line-height: 1.5;
      color: inherit;
      /* z-index: 2; */
      position: relative;
      overflow: visible;
      -webkit-tap-highlight-color: transparent;
      -webkit-font-variant-ligatures: contextual;
      font-variant-ligatures: contextual;
    }
  
    .CodeMirror pre.CodeMirror-line-like {
      z-index: 2;
    }
  
    .CodeMirror-wrap pre.CodeMirror-line,
    .CodeMirror-wrap pre.CodeMirror-line-like {
      word-wrap: break-word;
      white-space: pre-wrap;
      word-break: normal;
    }
  
    .CodeMirror-linebackground {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      z-index: 0;
    }
  
    .CodeMirror-linewidget {
      position: relative;
      /* z-index: 2; */
      padding: 0.1px; /* Force widget margins to stay inside of the container */
    }
  
    .CodeMirror-widget {
    }
  
    .CodeMirror-rtl pre {
      direction: rtl;
    }
  
    .CodeMirror-code {
      outline: none;
    }
  
    /* Force content-box sizing for the elements where we expect it */
    .CodeMirror-scroll,
    .CodeMirror-sizer,
    .CodeMirror-gutter,
    .CodeMirror-gutters,
    .CodeMirror-linenumber {
      -moz-box-sizing: content-box;
      box-sizing: content-box;
    }
  
    .CodeMirror-measure {
      position: absolute;
      width: 100%;
      height: 0;
      overflow: hidden;
      visibility: hidden;
    }
  
    .CodeMirror-cursor {
      position: absolute;
      pointer-events: none;
      border-color: ${({ theme }) => `${theme.colors.neutral800}`};
    }
    .CodeMirror-measure pre {
      position: static;
    }
  
    div.CodeMirror-cursors {
      visibility: hidden;
      position: relative;
      + div {
        z-index: 0 !important;
      }
    }
  
    div.CodeMirror-dragcursors {
      visibility: visible;
    }
  
    .CodeMirror-focused div.CodeMirror-cursors {
      visibility: visible;
    }
  
    .CodeMirror-selected {
      background: ${({ theme }) => theme.colors.neutral200};
      /* z-index: -10; */
    }
    .CodeMirror-crosshair {
      cursor: crosshair;
    }
  
    /* Used to force a border model for a node */
    .cm-force-border {
      padding-right: 0.1px;
    }
  
    /* See issue #2901 */
    .cm-tab-wrap-hack:after {
      content: '';
    }
  
    /* Help users use markselection to safely style text background */
    span.CodeMirror-selectedtext {
      background: none;
    }
  
    span {
      color: ${({ theme }) => theme.colors.neutral800} !important;
    }
  `;
  