@import '../constants/colors';
@import '../constants/dimensions';

.editor-wrapper {
  /**
   * There is a huge hack here. In order to expand an element 100% inside flexbox
   * you need to use a position: absolute hack like this...
   */
  position: relative;
  display: flex;
  flex: 1 1 100%;

  .editor {
    position: absolute;
    width: 100%;
    height: 100%;
    box-sizing: border-box;

    .CodeMirror {
      position: absolute;
      height: 100% !important;
      width: 100%;
      font-family: "Source Code Pro", monospace;
      box-sizing: border-box;
      font-size: $font-size-md;
      padding-top: $padding-sm;
    }

    .CodeMirror,
    .cm-s-seti.CodeMirror, // Hack because seti theme is dumb
    .CodeMirror-gutters,
    .CodeMirror-scrollbar-filler,
    .CodeMirror-gutter-filler {
      // Let the background behind show through
      background-color: transparent !important;
      border: 0;
    }

    .CodeMirror-linenumber, .CodeMirror-guttermarker-subtle {
      color: $hl-xl !important;
    }

    .CodeMirror-scroll {
      cursor: text; // Show text cursor everywhere (not just in .Codemirror-lines)
    }

    .CodeMirror-lines {
      // Scroll past the end
      padding-bottom: 100px;
    }

    .CodeMirror-placeholder {
      color: $hl-xxl;
    }
  }

  &.editor-wrapper--readonly .CodeMirror-cursors {
    opacity: 0;
  }
}