"use strict";
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var styled_1 = require("../../styled");
var EditorWrapper = styled_1.styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  /* Comment */\n  .cm-comment {\n    color: ", ";\n  }\n\n  /* Punctuation */\n  .cm-punctuation {\n    color: ", ";\n  }\n\n  /* Proppery */\n  .cm-property {\n    color: ", ";\n  }\n\n  /* Keyword */\n  .cm-keyword {\n    color: ", ";\n  }\n\n  /* OperationName, FragmentName */\n  .cm-def {\n    color: ", ";\n  }\n\n  /* FieldAlias */\n  .cm-qualifier {\n    color: ", ";\n  }\n\n  /* ArgumentName and ObjectFieldName */\n  .cm-attribute {\n    color: ", ";\n  }\n\n  /* Number */\n  .cm-number {\n    color: ", ";\n  }\n\n  /* String */\n  .cm-string {\n    color: ", ";\n  }\n\n  /* Boolean */\n  .cm-builtin {\n    color: ", ";\n  }\n\n  /* EnumValue */\n  .cm-string-2 {\n    color: ", ";\n  }\n\n  /* Variable */\n  .cm-variable {\n    color: ", ";\n  }\n\n  /* Directive */\n  .cm-meta {\n    color: ", ";\n  }\n\n  /* Type */\n  .cm-atom {\n    color: ", ";\n  }\n\n  /* Comma */\n  .cm-ws {\n    color: ", ";\n  }\n  position: relative;\n  display: flex;\n  flex: 1 1 0%;\n  flex-flow: column;\n\n  .CodeMirror {\n    color: rgba(255, 255, 255, 0.3);\n    font-family: ", ";\n    font-size: ", ";\n    height: 100%;\n    left: 0;\n    position: absolute;\n    top: 0;\n    width: 100%;\n  }\n\n  .CodeMirror-lines {\n    padding: 20px 0;\n  }\n\n  .CodeMirror-gutters {\n    border-right: none;\n  }\n\n  .CodeMirror span[role='presentation'] {\n    color: ", ";\n  }\n\n  /* CURSOR */\n\n  .CodeMirror div.CodeMirror-cursor {\n    background: ", ";\n    border-left: ", ";\n    border-bottom: ", ";\n  }\n  /* Shown when moving in bi-directional text */\n  .CodeMirror div.CodeMirror-secondarycursor {\n    border-left: 1px solid silver;\n  }\n  .CodeMirror.cm-fat-cursor div.CodeMirror-cursor {\n    background: rgba(255, 255, 255, 0.6);\n    color: white;\n    border: 0;\n    width: auto;\n  }\n  .CodeMirror.cm-fat-cursor div.CodeMirror-cursors {\n    z-index: 1;\n  }\n\n  .cm-animate-fat-cursor {\n    -webkit-animation: blink 1.06s steps(1) infinite;\n    animation: blink 1.06s steps(1) infinite;\n    border: 0;\n    width: auto;\n  }\n  @-webkit-keyframes blink {\n    0% {\n      background: #7e7;\n    }\n    50% {\n      background: none;\n    }\n    100% {\n      background: #7e7;\n    }\n  }\n  @keyframes blink {\n    0% {\n      background: #7e7;\n    }\n    50% {\n      background: none;\n    }\n    100% {\n      background: #7e7;\n    }\n  }\n\n  .CodeMirror-foldmarker {\n    border-radius: 4px;\n    background: #08f;\n    background: linear-gradient(#43a8ff, #0f83e8);\n    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.1);\n    color: white;\n    font-family: arial;\n    font-size: 12px;\n    line-height: 0;\n    margin: 0 3px;\n    padding: 0px 4px 1px;\n    text-shadow: 0 -1px rgba(0, 0, 0, 0.1);\n  }\n\n  div.CodeMirror span.CodeMirror-matchingbracket {\n    /* color: rgba(255, 255, 255, 0.4); */\n    text-decoration: underline;\n  }\n\n  div.CodeMirror span.CodeMirror-nonmatchingbracket {\n    color: rgb(242, 92, 84);\n  }\n\n  .toolbar-button {\n    background: #fdfdfd;\n    background: linear-gradient(#fbfbfb, #f8f8f8);\n    border-color: #d3d3d3 #d0d0d0 #bababa;\n    border-radius: 4px;\n    border-style: solid;\n    border-width: 0.5px;\n    box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.13), inset 0 1px #fff;\n    color: #444;\n    cursor: pointer;\n    display: inline-block;\n    margin: 0 5px 0;\n    padding: 2px 8px 4px;\n    text-decoration: none;\n  }\n  .toolbar-button:active {\n    background: linear-gradient(#ececec, #d8d8d8);\n    border-color: #cacaca #c9c9c9 #b0b0b0;\n    box-shadow: 0 1px 0 #fff, inset 0 1px rgba(255, 255, 255, 0.2),\n      inset 0 1px 1px rgba(0, 0, 0, 0.08);\n  }\n  .toolbar-button.error {\n    background: linear-gradient(#fdf3f3, #e6d6d7);\n    color: #b00;\n  }\n\n  .autoInsertedLeaf.cm-property {\n    -webkit-animation-duration: 6s;\n    animation-duration: 6s;\n    -webkit-animation-name: insertionFade;\n    animation-name: insertionFade;\n    border-bottom: 2px solid rgba(255, 255, 255, 0);\n    border-radius: 2px;\n    margin: -2px -4px -1px;\n    padding: 2px 4px 1px;\n  }\n\n  @-webkit-keyframes insertionFade {\n    from,\n    to {\n      background: rgba(255, 255, 255, 0);\n      border-color: rgba(255, 255, 255, 0);\n    }\n\n    15%,\n    85% {\n      background: #fbffc9;\n      border-color: #f0f3c0;\n    }\n  }\n\n  @keyframes insertionFade {\n    from,\n    to {\n      background: rgba(255, 255, 255, 0);\n      border-color: rgba(255, 255, 255, 0);\n    }\n\n    15%,\n    85% {\n      background: #fbffc9;\n      border-color: #f0f3c0;\n    }\n  }\n\n  .CodeMirror pre {\n    padding: 0 4px; /* Horizontal padding of content */\n  }\n\n  .CodeMirror-scrollbar-filler,\n  .CodeMirror-gutter-filler {\n    background-color: white; /* The little square between H and V scrollbars */\n  }\n\n  /* GUTTER */\n\n  .CodeMirror-gutters {\n    background-color: transparent;\n    border: none;\n    white-space: nowrap;\n  }\n  .CodeMirror-linenumbers {\n    background: ", ";\n  }\n  .CodeMirror-linenumber {\n    font-family: Open Sans, sans-serif;\n    font-weight: 600;\n    font-size: ", ";\n    color: ", ";\n    min-width: 20px;\n    padding: 0 3px 0 5px;\n    text-align: right;\n    white-space: nowrap;\n  }\n\n  .CodeMirror-guttermarker {\n    color: black;\n  }\n  .CodeMirror-guttermarker-subtle {\n    color: #999;\n  }\n\n  .cm-tab {\n    display: inline-block;\n    text-decoration: inherit;\n  }\n\n  .CodeMirror-ruler {\n    border-left: 1px solid #ccc;\n    position: absolute;\n  }\n  .cm-negative {\n    color: #d44;\n  }\n  .cm-positive {\n    color: #292;\n  }\n  .cm-header,\n  .cm-strong {\n    font-weight: bold;\n  }\n  .cm-em {\n    font-style: italic;\n  }\n  .cm-link {\n    text-decoration: underline;\n  }\n  .cm-strikethrough {\n    text-decoration: line-through;\n  }\n\n  .cm-s-default .cm-error {\n    color: #f00;\n  }\n  .cm-invalidchar {\n    color: #f00;\n  }\n\n  .CodeMirror-composing {\n    border-bottom: 2px solid;\n  }\n  .CodeMirror-matchingtag {\n    background: rgba(255, 150, 0, 0.3);\n  }\n  .CodeMirror-activeline-background {\n    background: #e8f2ff;\n  }\n\n  /* The rest of this file contains styles related to the mechanics of\n   the editor. You probably shouldn't touch them. */\n\n  .CodeMirror {\n    background: white;\n    overflow: hidden;\n    line-height: 1.6;\n  }\n\n  .CodeMirror-scroll {\n    height: 100%;\n    /* 30px is the magic margin used to hide the element's real scrollbars */\n    /* See overflow: hidden in .CodeMirror */\n    /* margin-bottom: -30px;\n    margin-right: -30px; */\n    outline: none; /* Prevent dragging from highlighting the element */\n    overflow: hidden;\n    /* padding-bottom: 30px; */\n    position: relative;\n    &:hover {\n      overflow: scroll !important;\n    }\n  }\n  .CodeMirror-sizer {\n    border-right: 30px solid transparent;\n    position: relative;\n  }\n\n  /* The fake, visible scrollbars. Used to force redraw during scrolling\n   before actual scrolling happens, thus preventing shaking and\n   flickering artifacts. */\n  .CodeMirror-vscrollbar,\n  .CodeMirror-hscrollbar,\n  .CodeMirror-scrollbar-filler,\n  .CodeMirror-gutter-filler {\n    display: none !important;\n    position: absolute;\n    z-index: 6;\n  }\n  .CodeMirror-vscrollbar {\n    overflow-x: hidden;\n    overflow-y: scroll;\n    right: 0;\n    top: 0;\n  }\n  .CodeMirror-hscrollbar {\n    bottom: 0;\n    left: 0;\n    overflow-x: scroll;\n    overflow-y: hidden;\n  }\n  .CodeMirror-scrollbar-filler {\n    right: 0;\n    bottom: 0;\n  }\n  .CodeMirror-gutter-filler {\n    left: 0;\n    bottom: 0;\n  }\n\n  .CodeMirror-gutters {\n    min-height: 100%;\n    position: absolute;\n    left: 0;\n    top: 0;\n    z-index: 3;\n    margin-left: 3px;\n  }\n  .CodeMirror-gutter {\n    display: inline-block;\n    height: 100%;\n    margin-bottom: -30px;\n    vertical-align: top;\n    white-space: normal;\n    /* Hack to make IE7 behave */\n    *zoom: 1;\n    *display: inline;\n  }\n  .CodeMirror-gutter-wrapper {\n    background: none !important;\n    border: none !important;\n    position: absolute;\n    z-index: 4;\n  }\n  .CodeMirror-gutter-background {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    z-index: 4;\n  }\n  .CodeMirror-gutter-elt {\n    cursor: default;\n    position: absolute;\n    z-index: 4;\n  }\n  .CodeMirror-gutter-wrapper {\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n  }\n\n  .CodeMirror-lines {\n    cursor: text;\n    min-height: 1px; /* prevents collapsing before first draw */\n  }\n  .CodeMirror pre {\n    -webkit-tap-highlight-color: transparent;\n    /* Reset some styles that the rest of the page might have set */\n    background: transparent;\n    border-radius: 0;\n    border-width: 0;\n    color: inherit;\n    font-family: inherit;\n    font-size: inherit;\n    -webkit-font-variant-ligatures: none;\n    font-variant-ligatures: none;\n    line-height: inherit;\n    margin: 0;\n    overflow: visible;\n    position: relative;\n    white-space: pre;\n    word-wrap: normal;\n    z-index: 2;\n  }\n  .CodeMirror-wrap pre {\n    word-wrap: break-word;\n    white-space: pre-wrap;\n    word-break: normal;\n  }\n\n  .CodeMirror-linebackground {\n    position: absolute;\n    left: 0;\n    right: 0;\n    top: 0;\n    bottom: 0;\n    z-index: 0;\n  }\n\n  .CodeMirror-linewidget {\n    overflow: auto;\n    position: relative;\n    z-index: 2;\n  }\n\n  .CodeMirror-widget {\n  }\n\n  .CodeMirror-code {\n    outline: none;\n  }\n\n  /* Force content-box sizing for the elements where we expect it */\n  .CodeMirror-scroll,\n  .CodeMirror-sizer,\n  .CodeMirror-gutter,\n  .CodeMirror-gutters,\n  .CodeMirror-linenumber {\n    box-sizing: content-box;\n  }\n\n  .CodeMirror-measure {\n    height: 0;\n    overflow: hidden;\n    position: absolute;\n    visibility: hidden;\n    width: 100%;\n  }\n\n  .CodeMirror-cursor {\n    position: absolute;\n  }\n  .CodeMirror-measure pre {\n    position: static;\n  }\n\n  div.CodeMirror-cursors {\n    position: relative;\n    visibility: hidden;\n    z-index: 3;\n  }\n  div.CodeMirror-dragcursors {\n    visibility: visible;\n  }\n\n  .CodeMirror-focused div.CodeMirror-cursors {\n    visibility: visible;\n  }\n\n  .CodeMirror-selected {\n    background: ", ";\n  }\n  .CodeMirror-focused .CodeMirror-selected {\n    background: ", ";\n  }\n  .CodeMirror-crosshair {\n    cursor: crosshair;\n  }\n  .CodeMirror-line::-moz-selection,\n  .CodeMirror-line > span::-moz-selection,\n  .CodeMirror-line > span > span::-moz-selection {\n    background: ", ";\n  }\n  .CodeMirror-line::selection,\n  .CodeMirror-line > span::selection,\n  .CodeMirror-line > span > span::selection {\n    background: ", ";\n  }\n  .CodeMirror-line::-moz-selection,\n  .CodeMirror-line > span::-moz-selection,\n  .CodeMirror-line > span > span::-moz-selection {\n    background: ", ";\n  }\n\n  .cm-searching {\n    background: #ffa;\n    background: rgba(255, 255, 0, 0.4);\n  }\n\n  /* IE7 hack to prevent it from returning funny offsetTops on the spans */\n  .CodeMirror span {\n    *vertical-align: text-bottom;\n  }\n\n  /* Used to force a border model for a node */\n  .cm-force-border {\n    padding-right: 0.1px;\n  }\n\n  @media print {\n    /* Hide the cursor when printing */\n    .CodeMirror div.CodeMirror-cursors {\n      visibility: hidden;\n    }\n  }\n\n  /* See issue #2901 */\n  .cm-tab-wrap-hack:after {\n    content: '';\n  }\n\n  /* Help users use markselection to safely style text background */\n  span.CodeMirror-selectedtext {\n    background: none;\n  }\n\n  .CodeMirror-dialog {\n    background: inherit;\n    color: inherit;\n    left: 0;\n    right: 0;\n    overflow: hidden;\n    padding: 0.1em 0.8em;\n    position: absolute;\n    z-index: 15;\n  }\n\n  .CodeMirror-dialog-top {\n    border-bottom: 1px solid #eee;\n    top: 0;\n  }\n\n  .CodeMirror-dialog-bottom {\n    border-top: 1px solid #eee;\n    bottom: 0;\n  }\n\n  .CodeMirror-dialog input {\n    background: transparent;\n    border: 1px solid #d3d6db;\n    color: inherit;\n    font-family: monospace;\n    outline: none;\n    width: 20em;\n  }\n\n  .CodeMirror-dialog span.CodeMirror-search-label {\n    color: ", ";\n  }\n\n  .CodeMirror-dialog input.CodeMirror-search-field {\n    color: ", ";\n    background: ", ";\n  }\n\n  .CodeMirror-dialog button {\n    font-size: 70%;\n  }\n\n  .CodeMirror-foldgutter {\n    width: 0.7em;\n  }\n  .CodeMirror-foldgutter-open,\n  .CodeMirror-foldgutter-folded {\n    cursor: pointer;\n  }\n  .CodeMirror-foldgutter-open:after {\n    content: '\u25BE';\n  }\n  .CodeMirror-foldgutter-folded:after {\n    content: '\u25B8';\n  }\n  /* The lint marker gutter */\n  .CodeMirror-lint-markers {\n    width: 16px;\n  }\n\n  .CodeMirror-jump-token {\n    cursor: pointer;\n    text-decoration: underline;\n  }\n"], ["\n  /* Comment */\n  .cm-comment {\n    color: ", ";\n  }\n\n  /* Punctuation */\n  .cm-punctuation {\n    color: ", ";\n  }\n\n  /* Proppery */\n  .cm-property {\n    color: ", ";\n  }\n\n  /* Keyword */\n  .cm-keyword {\n    color: ", ";\n  }\n\n  /* OperationName, FragmentName */\n  .cm-def {\n    color: ", ";\n  }\n\n  /* FieldAlias */\n  .cm-qualifier {\n    color: ", ";\n  }\n\n  /* ArgumentName and ObjectFieldName */\n  .cm-attribute {\n    color: ", ";\n  }\n\n  /* Number */\n  .cm-number {\n    color: ", ";\n  }\n\n  /* String */\n  .cm-string {\n    color: ", ";\n  }\n\n  /* Boolean */\n  .cm-builtin {\n    color: ", ";\n  }\n\n  /* EnumValue */\n  .cm-string-2 {\n    color: ", ";\n  }\n\n  /* Variable */\n  .cm-variable {\n    color: ", ";\n  }\n\n  /* Directive */\n  .cm-meta {\n    color: ", ";\n  }\n\n  /* Type */\n  .cm-atom {\n    color: ", ";\n  }\n\n  /* Comma */\n  .cm-ws {\n    color: ", ";\n  }\n  position: relative;\n  display: flex;\n  flex: 1 1 0%;\n  flex-flow: column;\n\n  .CodeMirror {\n    color: rgba(255, 255, 255, 0.3);\n    font-family: ", ";\n    font-size: ", ";\n    height: 100%;\n    left: 0;\n    position: absolute;\n    top: 0;\n    width: 100%;\n  }\n\n  .CodeMirror-lines {\n    padding: 20px 0;\n  }\n\n  .CodeMirror-gutters {\n    border-right: none;\n  }\n\n  .CodeMirror span[role='presentation'] {\n    color: ", ";\n  }\n\n  /* CURSOR */\n\n  .CodeMirror div.CodeMirror-cursor {\n    background: ",
    ";\n    border-left: ",
    ";\n    border-bottom: ",
    ";\n  }\n  /* Shown when moving in bi-directional text */\n  .CodeMirror div.CodeMirror-secondarycursor {\n    border-left: 1px solid silver;\n  }\n  .CodeMirror.cm-fat-cursor div.CodeMirror-cursor {\n    background: rgba(255, 255, 255, 0.6);\n    color: white;\n    border: 0;\n    width: auto;\n  }\n  .CodeMirror.cm-fat-cursor div.CodeMirror-cursors {\n    z-index: 1;\n  }\n\n  .cm-animate-fat-cursor {\n    -webkit-animation: blink 1.06s steps(1) infinite;\n    animation: blink 1.06s steps(1) infinite;\n    border: 0;\n    width: auto;\n  }\n  @-webkit-keyframes blink {\n    0% {\n      background: #7e7;\n    }\n    50% {\n      background: none;\n    }\n    100% {\n      background: #7e7;\n    }\n  }\n  @keyframes blink {\n    0% {\n      background: #7e7;\n    }\n    50% {\n      background: none;\n    }\n    100% {\n      background: #7e7;\n    }\n  }\n\n  .CodeMirror-foldmarker {\n    border-radius: 4px;\n    background: #08f;\n    background: linear-gradient(#43a8ff, #0f83e8);\n    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.1);\n    color: white;\n    font-family: arial;\n    font-size: 12px;\n    line-height: 0;\n    margin: 0 3px;\n    padding: 0px 4px 1px;\n    text-shadow: 0 -1px rgba(0, 0, 0, 0.1);\n  }\n\n  div.CodeMirror span.CodeMirror-matchingbracket {\n    /* color: rgba(255, 255, 255, 0.4); */\n    text-decoration: underline;\n  }\n\n  div.CodeMirror span.CodeMirror-nonmatchingbracket {\n    color: rgb(242, 92, 84);\n  }\n\n  .toolbar-button {\n    background: #fdfdfd;\n    background: linear-gradient(#fbfbfb, #f8f8f8);\n    border-color: #d3d3d3 #d0d0d0 #bababa;\n    border-radius: 4px;\n    border-style: solid;\n    border-width: 0.5px;\n    box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.13), inset 0 1px #fff;\n    color: #444;\n    cursor: pointer;\n    display: inline-block;\n    margin: 0 5px 0;\n    padding: 2px 8px 4px;\n    text-decoration: none;\n  }\n  .toolbar-button:active {\n    background: linear-gradient(#ececec, #d8d8d8);\n    border-color: #cacaca #c9c9c9 #b0b0b0;\n    box-shadow: 0 1px 0 #fff, inset 0 1px rgba(255, 255, 255, 0.2),\n      inset 0 1px 1px rgba(0, 0, 0, 0.08);\n  }\n  .toolbar-button.error {\n    background: linear-gradient(#fdf3f3, #e6d6d7);\n    color: #b00;\n  }\n\n  .autoInsertedLeaf.cm-property {\n    -webkit-animation-duration: 6s;\n    animation-duration: 6s;\n    -webkit-animation-name: insertionFade;\n    animation-name: insertionFade;\n    border-bottom: 2px solid rgba(255, 255, 255, 0);\n    border-radius: 2px;\n    margin: -2px -4px -1px;\n    padding: 2px 4px 1px;\n  }\n\n  @-webkit-keyframes insertionFade {\n    from,\n    to {\n      background: rgba(255, 255, 255, 0);\n      border-color: rgba(255, 255, 255, 0);\n    }\n\n    15%,\n    85% {\n      background: #fbffc9;\n      border-color: #f0f3c0;\n    }\n  }\n\n  @keyframes insertionFade {\n    from,\n    to {\n      background: rgba(255, 255, 255, 0);\n      border-color: rgba(255, 255, 255, 0);\n    }\n\n    15%,\n    85% {\n      background: #fbffc9;\n      border-color: #f0f3c0;\n    }\n  }\n\n  .CodeMirror pre {\n    padding: 0 4px; /* Horizontal padding of content */\n  }\n\n  .CodeMirror-scrollbar-filler,\n  .CodeMirror-gutter-filler {\n    background-color: white; /* The little square between H and V scrollbars */\n  }\n\n  /* GUTTER */\n\n  .CodeMirror-gutters {\n    background-color: transparent;\n    border: none;\n    white-space: nowrap;\n  }\n  .CodeMirror-linenumbers {\n    background: ", ";\n  }\n  .CodeMirror-linenumber {\n    font-family: Open Sans, sans-serif;\n    font-weight: 600;\n    font-size: ", ";\n    color: ", ";\n    min-width: 20px;\n    padding: 0 3px 0 5px;\n    text-align: right;\n    white-space: nowrap;\n  }\n\n  .CodeMirror-guttermarker {\n    color: black;\n  }\n  .CodeMirror-guttermarker-subtle {\n    color: #999;\n  }\n\n  .cm-tab {\n    display: inline-block;\n    text-decoration: inherit;\n  }\n\n  .CodeMirror-ruler {\n    border-left: 1px solid #ccc;\n    position: absolute;\n  }\n  .cm-negative {\n    color: #d44;\n  }\n  .cm-positive {\n    color: #292;\n  }\n  .cm-header,\n  .cm-strong {\n    font-weight: bold;\n  }\n  .cm-em {\n    font-style: italic;\n  }\n  .cm-link {\n    text-decoration: underline;\n  }\n  .cm-strikethrough {\n    text-decoration: line-through;\n  }\n\n  .cm-s-default .cm-error {\n    color: #f00;\n  }\n  .cm-invalidchar {\n    color: #f00;\n  }\n\n  .CodeMirror-composing {\n    border-bottom: 2px solid;\n  }\n  .CodeMirror-matchingtag {\n    background: rgba(255, 150, 0, 0.3);\n  }\n  .CodeMirror-activeline-background {\n    background: #e8f2ff;\n  }\n\n  /* The rest of this file contains styles related to the mechanics of\n   the editor. You probably shouldn't touch them. */\n\n  .CodeMirror {\n    background: white;\n    overflow: hidden;\n    line-height: 1.6;\n  }\n\n  .CodeMirror-scroll {\n    height: 100%;\n    /* 30px is the magic margin used to hide the element's real scrollbars */\n    /* See overflow: hidden in .CodeMirror */\n    /* margin-bottom: -30px;\n    margin-right: -30px; */\n    outline: none; /* Prevent dragging from highlighting the element */\n    overflow: hidden;\n    /* padding-bottom: 30px; */\n    position: relative;\n    &:hover {\n      overflow: scroll !important;\n    }\n  }\n  .CodeMirror-sizer {\n    border-right: 30px solid transparent;\n    position: relative;\n  }\n\n  /* The fake, visible scrollbars. Used to force redraw during scrolling\n   before actual scrolling happens, thus preventing shaking and\n   flickering artifacts. */\n  .CodeMirror-vscrollbar,\n  .CodeMirror-hscrollbar,\n  .CodeMirror-scrollbar-filler,\n  .CodeMirror-gutter-filler {\n    display: none !important;\n    position: absolute;\n    z-index: 6;\n  }\n  .CodeMirror-vscrollbar {\n    overflow-x: hidden;\n    overflow-y: scroll;\n    right: 0;\n    top: 0;\n  }\n  .CodeMirror-hscrollbar {\n    bottom: 0;\n    left: 0;\n    overflow-x: scroll;\n    overflow-y: hidden;\n  }\n  .CodeMirror-scrollbar-filler {\n    right: 0;\n    bottom: 0;\n  }\n  .CodeMirror-gutter-filler {\n    left: 0;\n    bottom: 0;\n  }\n\n  .CodeMirror-gutters {\n    min-height: 100%;\n    position: absolute;\n    left: 0;\n    top: 0;\n    z-index: 3;\n    margin-left: 3px;\n  }\n  .CodeMirror-gutter {\n    display: inline-block;\n    height: 100%;\n    margin-bottom: -30px;\n    vertical-align: top;\n    white-space: normal;\n    /* Hack to make IE7 behave */\n    *zoom: 1;\n    *display: inline;\n  }\n  .CodeMirror-gutter-wrapper {\n    background: none !important;\n    border: none !important;\n    position: absolute;\n    z-index: 4;\n  }\n  .CodeMirror-gutter-background {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    z-index: 4;\n  }\n  .CodeMirror-gutter-elt {\n    cursor: default;\n    position: absolute;\n    z-index: 4;\n  }\n  .CodeMirror-gutter-wrapper {\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n  }\n\n  .CodeMirror-lines {\n    cursor: text;\n    min-height: 1px; /* prevents collapsing before first draw */\n  }\n  .CodeMirror pre {\n    -webkit-tap-highlight-color: transparent;\n    /* Reset some styles that the rest of the page might have set */\n    background: transparent;\n    border-radius: 0;\n    border-width: 0;\n    color: inherit;\n    font-family: inherit;\n    font-size: inherit;\n    -webkit-font-variant-ligatures: none;\n    font-variant-ligatures: none;\n    line-height: inherit;\n    margin: 0;\n    overflow: visible;\n    position: relative;\n    white-space: pre;\n    word-wrap: normal;\n    z-index: 2;\n  }\n  .CodeMirror-wrap pre {\n    word-wrap: break-word;\n    white-space: pre-wrap;\n    word-break: normal;\n  }\n\n  .CodeMirror-linebackground {\n    position: absolute;\n    left: 0;\n    right: 0;\n    top: 0;\n    bottom: 0;\n    z-index: 0;\n  }\n\n  .CodeMirror-linewidget {\n    overflow: auto;\n    position: relative;\n    z-index: 2;\n  }\n\n  .CodeMirror-widget {\n  }\n\n  .CodeMirror-code {\n    outline: none;\n  }\n\n  /* Force content-box sizing for the elements where we expect it */\n  .CodeMirror-scroll,\n  .CodeMirror-sizer,\n  .CodeMirror-gutter,\n  .CodeMirror-gutters,\n  .CodeMirror-linenumber {\n    box-sizing: content-box;\n  }\n\n  .CodeMirror-measure {\n    height: 0;\n    overflow: hidden;\n    position: absolute;\n    visibility: hidden;\n    width: 100%;\n  }\n\n  .CodeMirror-cursor {\n    position: absolute;\n  }\n  .CodeMirror-measure pre {\n    position: static;\n  }\n\n  div.CodeMirror-cursors {\n    position: relative;\n    visibility: hidden;\n    z-index: 3;\n  }\n  div.CodeMirror-dragcursors {\n    visibility: visible;\n  }\n\n  .CodeMirror-focused div.CodeMirror-cursors {\n    visibility: visible;\n  }\n\n  .CodeMirror-selected {\n    background: ", ";\n  }\n  .CodeMirror-focused .CodeMirror-selected {\n    background: ", ";\n  }\n  .CodeMirror-crosshair {\n    cursor: crosshair;\n  }\n  .CodeMirror-line::-moz-selection,\n  .CodeMirror-line > span::-moz-selection,\n  .CodeMirror-line > span > span::-moz-selection {\n    background: ", ";\n  }\n  .CodeMirror-line::selection,\n  .CodeMirror-line > span::selection,\n  .CodeMirror-line > span > span::selection {\n    background: ", ";\n  }\n  .CodeMirror-line::-moz-selection,\n  .CodeMirror-line > span::-moz-selection,\n  .CodeMirror-line > span > span::-moz-selection {\n    background: ", ";\n  }\n\n  .cm-searching {\n    background: #ffa;\n    background: rgba(255, 255, 0, 0.4);\n  }\n\n  /* IE7 hack to prevent it from returning funny offsetTops on the spans */\n  .CodeMirror span {\n    *vertical-align: text-bottom;\n  }\n\n  /* Used to force a border model for a node */\n  .cm-force-border {\n    padding-right: 0.1px;\n  }\n\n  @media print {\n    /* Hide the cursor when printing */\n    .CodeMirror div.CodeMirror-cursors {\n      visibility: hidden;\n    }\n  }\n\n  /* See issue #2901 */\n  .cm-tab-wrap-hack:after {\n    content: '';\n  }\n\n  /* Help users use markselection to safely style text background */\n  span.CodeMirror-selectedtext {\n    background: none;\n  }\n\n  .CodeMirror-dialog {\n    background: inherit;\n    color: inherit;\n    left: 0;\n    right: 0;\n    overflow: hidden;\n    padding: 0.1em 0.8em;\n    position: absolute;\n    z-index: 15;\n  }\n\n  .CodeMirror-dialog-top {\n    border-bottom: 1px solid #eee;\n    top: 0;\n  }\n\n  .CodeMirror-dialog-bottom {\n    border-top: 1px solid #eee;\n    bottom: 0;\n  }\n\n  .CodeMirror-dialog input {\n    background: transparent;\n    border: 1px solid #d3d6db;\n    color: inherit;\n    font-family: monospace;\n    outline: none;\n    width: 20em;\n  }\n\n  .CodeMirror-dialog span.CodeMirror-search-label {\n    color: ", ";\n  }\n\n  .CodeMirror-dialog input.CodeMirror-search-field {\n    color: ", ";\n    background: ", ";\n  }\n\n  .CodeMirror-dialog button {\n    font-size: 70%;\n  }\n\n  .CodeMirror-foldgutter {\n    width: 0.7em;\n  }\n  .CodeMirror-foldgutter-open,\n  .CodeMirror-foldgutter-folded {\n    cursor: pointer;\n  }\n  .CodeMirror-foldgutter-open:after {\n    content: '\u25BE';\n  }\n  .CodeMirror-foldgutter-folded:after {\n    content: '\u25B8';\n  }\n  /* The lint marker gutter */\n  .CodeMirror-lint-markers {\n    width: 16px;\n  }\n\n  .CodeMirror-jump-token {\n    cursor: pointer;\n    text-decoration: underline;\n  }\n"
    // Styling of portal for hints
    // .CodeMirror-info info for types breaks stack trace
    // tslint:disable-next-line
])), function (p) { return p.theme.editorColours.comment; }, function (p) { return p.theme.editorColours.punctuation; }, function (p) { return p.theme.editorColours.property; }, function (p) { return p.theme.editorColours.keyword; }, function (p) { return p.theme.editorColours.def; }, function (p) { return p.theme.editorColours.def; }, function (p) { return p.theme.editorColours.attribute; }, function (p) { return p.theme.editorColours.number; }, function (p) { return p.theme.editorColours.string; }, function (p) { return p.theme.editorColours.builtin; }, function (p) { return p.theme.editorColours.string2; }, function (p) { return p.theme.editorColours.variable; }, function (p) { return p.theme.editorColours.meta; }, function (p) { return p.theme.editorColours.atom; }, function (p) { return p.theme.editorColours.ws; }, function (p) { return p.theme.settings['editor.fontFamily']; }, function (p) { return p.theme.settings['editor.fontSize'] + "px"; }, function (p) { return p.theme.colours.text; }, function (p) {
    return p.theme.settings['editor.cursorShape'] === 'block'
        ? p.theme.editorColours.cursorColor
        : 'transparent';
}, function (p) {
    return p.theme.settings['editor.cursorShape'] === 'line'
        ? "1px solid " + p.theme.editorColours.cursorColor
        : 0;
}, function (p) {
    return p.theme.settings['editor.cursorShape'] === 'underline'
        ? "1px solid " + p.theme.editorColours.cursorColor
        : 0;
}, function (p) { return p.theme.editorColours.editorBackground; }, function (p) { return p.theme.settings['editor.fontSize'] - 2 + "px"; }, function (p) { return p.theme.colours.textInactive; }, function (p) { return p.theme.editorColours.selection; }, function (p) { return p.theme.editorColours.selection; }, function (p) { return p.theme.editorColours.selection; }, function (p) { return p.theme.editorColours.selection; }, function (p) { return p.theme.editorColours.selection; }, function (p) { return p.theme.colours.text; }, function (p) { return p.theme.colours.text; }, function (p) { return p.theme.colours.background; });
// Styling of portal for hints
// .CodeMirror-info info for types breaks stack trace
// tslint:disable-next-line
var GlobalStyle = styled_1.createGlobalStyle(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  *::-webkit-scrollbar {\n    -webkit-appearance: none;\n    width: 7px;\n    height: 7px;\n  }\n  *::-webkit-scrollbar-track-piece {\n    background-color: rgba(255, 255, 255, 0);\n  }\n  *::-webkit-scrollbar-track {\n    background-color: inherit;\n  }\n  *::-webkit-scrollbar-thumb {\n    max-height: 100px;\n    border-radius: 3px;\n    background-color: rgba(1, 1, 1, 0.23);\n  }\n  *::-webkit-scrollbar-thumb:hover {\n    background-color: rgba(1, 1, 1, 0.35);\n  }\n  *::-webkit-scrollbar-thumb:active {\n    background-color: rgba(1, 1, 1, 0.48);\n  }\n  *::-webkit-scrollbar-corner {\n    background: rgba(0,0,0,0);\n  }\n\n\n  .CodeMirror-lint-tooltip, .CodeMirror-info {\n    background-color: white;\n    border-radius: 4px 4px 4px 4px;\n    border: 1px solid black;\n    color: #09141C;\n    font-family: Open Sans, monospace;\n    font-size: 14px;\n    max-width: 600px;\n    opacity: 0;\n    overflow: hidden;\n    padding: 12px 14px;\n    position: fixed;\n    -webkit-transition: opacity 0.4s;\n    transition: opacity 0.4s;\n    z-index: 100;\n  }\n\n  .CodeMirror-lint-message-error,\n  .CodeMirror-lint-message-warning {\n    padding-left: 18px;\n  }\n\n  .CodeMirror-lint-mark-error,\n  .CodeMirror-lint-mark-warning {\n    background-position: left bottom;\n    background-repeat: repeat-x;\n  }\n\n  .CodeMirror-lint-mark-error {\n    background-image: url('data:image/svg+xml;utf8,<svg width=\"5\" height=\"4\" viewBox=\"0 0 5 4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path d=\"M5 1.00954C4.87191 1.03474 4.75219 1.10989 4.674 1.235L3.87 2.52141C3.28249 3.46141 1.9135 3.46141 1.326 2.52141L0.521998 1.235C0.404356 1.04677 0.19271 0.971619 0 1.00954V0.00314821C0.0325855 0.00105209 0.0652291 2.68503e-06 0.0978728 5.14592e-09C0.0977892 -1.71531e-09 0.0979564 -1.71531e-09 0.0978728 5.14592e-09C0.586954 4.01563e-05 1.07627 0.235041 1.37 0.705002L2.174 1.99141C2.36983 2.30474 2.82616 2.30474 3.022 1.99141L3.826 0.705002C4.10012 0.266408 4.54438 0.0324569 5 0.00314818V1.00954Z\" fill=\"#FF4F56\"/>\n    </svg>\n    ');\n  }\n\n  .CodeMirror-lint-mark-warning {\n    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sJFhQXEbhTg7YAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAMklEQVQI12NkgIIvJ3QXMjAwdDN+OaEbysDA4MPAwNDNwMCwiOHLCd1zX07o6kBVGQEAKBANtobskNMAAAAASUVORK5CYII=');\n  }\n\n  .CodeMirror-lint-marker-error,\n  .CodeMirror-lint-marker-warning {\n    background-position: center center;\n    background-repeat: no-repeat;\n    cursor: pointer;\n    display: inline-block;\n    height: 16px;\n    position: relative;\n    vertical-align: middle;\n    width: 16px;\n  }\n\n  .CodeMirror-lint-message-error,\n  .CodeMirror-lint-message-warning {\n    background-position: top left;\n    background-repeat: no-repeat;\n    padding-left: 22px;\n  }\n\n  .CodeMirror-lint-marker-error,\n  .CodeMirror-lint-message-error {\n    background-image: url('data:image/svg+xml;utf8,<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <circle cx=\"8\" cy=\"8\" r=\"8\" fill=\"#FF4F56\"/>\n    <path d=\"M4.2929 10.2928C3.90237 10.6833 3.90237 11.3164 4.29289 11.707C4.68341 12.0975 5.31657 12.0975 5.7071 11.707L4.2929 10.2928ZM11.7071 5.70711C12.0976 5.31659 12.0976 4.68343 11.7071 4.2929C11.3166 3.90237 10.6834 3.90237 10.2929 4.29289L11.7071 5.70711ZM5.7071 4.29301C5.31657 3.90249 4.68341 3.9025 4.29289 4.29302C3.90237 4.68355 3.90237 5.31672 4.2929 5.70724L5.7071 4.29301ZM10.2929 11.7071C10.6834 12.0976 11.3166 12.0976 11.7071 11.7071C12.0976 11.3166 12.0976 10.6834 11.7071 10.2929L10.2929 11.7071ZM5.7071 11.707L11.7071 5.70711L10.2929 4.29289L4.2929 10.2928L5.7071 11.707ZM4.2929 5.70724L10.2929 11.7071L11.7071 10.2929L5.7071 4.29301L4.2929 5.70724Z\" fill=\"white\"/>\n    </svg>\n    ');\n    background-position: 0 50%;\n  }\n\n  .CodeMirror-lint-marker-warning,\n  .CodeMirror-lint-message-warning {\n    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAANlBMVEX/uwDvrwD/uwD/uwD/uwD/uwD/uwD/uwD/uwD6twD/uwAAAADurwD2tQD7uAD+ugAAAAD/uwDhmeTRAAAADHRSTlMJ8mN1EYcbmiixgACm7WbuAAAAVklEQVR42n3PUQqAIBBFUU1LLc3u/jdbOJoW1P08DA9Gba8+YWJ6gNJoNYIBzAA2chBth5kLmG9YUoG0NHAUwFXwO9LuBQL1giCQb8gC9Oro2vp5rncCIY8L8uEx5ZkAAAAASUVORK5CYII=');\n  }\n\n  .CodeMirror-lint-marker-multiple {\n    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAMAAADzjKfhAAAACVBMVEUAAAAAAAC/v7914kyHAAAAAXRSTlMAQObYZgAAACNJREFUeNo1ioEJAAAIwmz/H90iFFSGJgFMe3gaLZ0od+9/AQZ0ADosbYraAAAAAElFTkSuQmCC');\n    background-position: right bottom;\n    background-repeat: no-repeat;\n    width: 100%;\n    height: 100%;\n  }\n\n  .CodeMirror-lint-mark-error {\n    &:before {\n      content: '';\n      width: 50px;\n      height: 14px;\n      position: absolute;\n      background: #FF4F56;\n      left: -80px;\n      top: 50%;\n      transform: translateY(-50%);\n      z-index: 10;\n    }\n  }\n\n  .CodeMirror-lint-message-error span {\n    color: white;\n    background: #FF4F56;\n    font-family: 'Source Code Pro', monospace;\n    font-weight: 600;\n    border-radius: 2px;\n    padding: 0 4px;\n  }\n\n  .CodeMirror-hints {\n    background: white;\n    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);\n    font-size: 14px;\n    list-style: none;\n    margin-left: -6px;\n    margin: 0;\n    max-height: 20em;\n    overflow: hidden;\n    padding: 0;\n    position: absolute;\n    z-index: 10;\n    border-radius: 2px;\n    top: 0;\n    left: 0;\n    &:hover {\n      overflow-y: overlay;\n    }\n  }\n\n  .CodeMirror-hints-wrapper {\n    font-family: 'Open Sans', sans-serif;\n    background: white;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);\n    margin-left: -6px;\n    position: absolute;\n    z-index: 10;\n  }\n\n  .CodeMirror-hints-wrapper .CodeMirror-hints {\n    box-shadow: none;\n    margin-left: 0;\n    position: relative;\n    z-index: 0;\n  }\n\n  .CodeMirror-hint {\n    color: rgba(15, 32, 45, 0.6);\n    cursor: pointer;\n    margin: 0;\n    max-width: 300px;\n    overflow: hidden;\n    padding: 6px 12px;\n    white-space: pre;\n  }\n\n  li.CodeMirror-hint-active {\n    background-color: #2a7ed3;\n    border-top-color: white;\n    color: white;\n  }\n\n  .CodeMirror-hint-information {\n    border-top: solid 1px rgba(0, 0, 0, 0.1);\n    max-width: 300px;\n    padding: 10px 12px;\n    position: relative;\n    z-index: 1;\n    background-color: rgba(15, 32, 45, 0.03);\n    font-size: 14px;\n  }\n\n  .CodeMirror-hint-information:first-child {\n    border-bottom: solid 1px #c0c0c0;\n    border-top: none;\n    margin-bottom: -1px;\n  }\n\n  .CodeMirror-hint-information .content {\n    color: rgba(15, 32, 45, 0.6);\n    box-orient: vertical;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    line-clamp: 3;\n    line-height: 1.36;\n    max-height: 59px;\n    overflow: hidden;\n    text-overflow: -o-ellipsis-lastline;\n  }\n\n  .CodeMirror-hint-information .content p:first-child {\n    margin-top: 0;\n  }\n\n  .CodeMirror-hint-information .content p:last-child {\n    margin-bottom: 0;\n  }\n\n  .CodeMirror-hint-information .infoType {\n    color: rgb(241, 143, 1);\n    cursor: pointer;\n    display: inline;\n    margin-right: 0.5em;\n  }\n"], ["\n  *::-webkit-scrollbar {\n    -webkit-appearance: none;\n    width: 7px;\n    height: 7px;\n  }\n  *::-webkit-scrollbar-track-piece {\n    background-color: rgba(255, 255, 255, 0);\n  }\n  *::-webkit-scrollbar-track {\n    background-color: inherit;\n  }\n  *::-webkit-scrollbar-thumb {\n    max-height: 100px;\n    border-radius: 3px;\n    background-color: rgba(1, 1, 1, 0.23);\n  }\n  *::-webkit-scrollbar-thumb:hover {\n    background-color: rgba(1, 1, 1, 0.35);\n  }\n  *::-webkit-scrollbar-thumb:active {\n    background-color: rgba(1, 1, 1, 0.48);\n  }\n  *::-webkit-scrollbar-corner {\n    background: rgba(0,0,0,0);\n  }\n\n\n  .CodeMirror-lint-tooltip, .CodeMirror-info {\n    background-color: white;\n    border-radius: 4px 4px 4px 4px;\n    border: 1px solid black;\n    color: #09141C;\n    font-family: Open Sans, monospace;\n    font-size: 14px;\n    max-width: 600px;\n    opacity: 0;\n    overflow: hidden;\n    padding: 12px 14px;\n    position: fixed;\n    -webkit-transition: opacity 0.4s;\n    transition: opacity 0.4s;\n    z-index: 100;\n  }\n\n  .CodeMirror-lint-message-error,\n  .CodeMirror-lint-message-warning {\n    padding-left: 18px;\n  }\n\n  .CodeMirror-lint-mark-error,\n  .CodeMirror-lint-mark-warning {\n    background-position: left bottom;\n    background-repeat: repeat-x;\n  }\n\n  .CodeMirror-lint-mark-error {\n    background-image: url('data:image/svg+xml;utf8,<svg width=\"5\" height=\"4\" viewBox=\"0 0 5 4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path d=\"M5 1.00954C4.87191 1.03474 4.75219 1.10989 4.674 1.235L3.87 2.52141C3.28249 3.46141 1.9135 3.46141 1.326 2.52141L0.521998 1.235C0.404356 1.04677 0.19271 0.971619 0 1.00954V0.00314821C0.0325855 0.00105209 0.0652291 2.68503e-06 0.0978728 5.14592e-09C0.0977892 -1.71531e-09 0.0979564 -1.71531e-09 0.0978728 5.14592e-09C0.586954 4.01563e-05 1.07627 0.235041 1.37 0.705002L2.174 1.99141C2.36983 2.30474 2.82616 2.30474 3.022 1.99141L3.826 0.705002C4.10012 0.266408 4.54438 0.0324569 5 0.00314818V1.00954Z\" fill=\"#FF4F56\"/>\n    </svg>\n    ');\n  }\n\n  .CodeMirror-lint-mark-warning {\n    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sJFhQXEbhTg7YAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAMklEQVQI12NkgIIvJ3QXMjAwdDN+OaEbysDA4MPAwNDNwMCwiOHLCd1zX07o6kBVGQEAKBANtobskNMAAAAASUVORK5CYII=');\n  }\n\n  .CodeMirror-lint-marker-error,\n  .CodeMirror-lint-marker-warning {\n    background-position: center center;\n    background-repeat: no-repeat;\n    cursor: pointer;\n    display: inline-block;\n    height: 16px;\n    position: relative;\n    vertical-align: middle;\n    width: 16px;\n  }\n\n  .CodeMirror-lint-message-error,\n  .CodeMirror-lint-message-warning {\n    background-position: top left;\n    background-repeat: no-repeat;\n    padding-left: 22px;\n  }\n\n  .CodeMirror-lint-marker-error,\n  .CodeMirror-lint-message-error {\n    background-image: url('data:image/svg+xml;utf8,<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <circle cx=\"8\" cy=\"8\" r=\"8\" fill=\"#FF4F56\"/>\n    <path d=\"M4.2929 10.2928C3.90237 10.6833 3.90237 11.3164 4.29289 11.707C4.68341 12.0975 5.31657 12.0975 5.7071 11.707L4.2929 10.2928ZM11.7071 5.70711C12.0976 5.31659 12.0976 4.68343 11.7071 4.2929C11.3166 3.90237 10.6834 3.90237 10.2929 4.29289L11.7071 5.70711ZM5.7071 4.29301C5.31657 3.90249 4.68341 3.9025 4.29289 4.29302C3.90237 4.68355 3.90237 5.31672 4.2929 5.70724L5.7071 4.29301ZM10.2929 11.7071C10.6834 12.0976 11.3166 12.0976 11.7071 11.7071C12.0976 11.3166 12.0976 10.6834 11.7071 10.2929L10.2929 11.7071ZM5.7071 11.707L11.7071 5.70711L10.2929 4.29289L4.2929 10.2928L5.7071 11.707ZM4.2929 5.70724L10.2929 11.7071L11.7071 10.2929L5.7071 4.29301L4.2929 5.70724Z\" fill=\"white\"/>\n    </svg>\n    ');\n    background-position: 0 50%;\n  }\n\n  .CodeMirror-lint-marker-warning,\n  .CodeMirror-lint-message-warning {\n    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAANlBMVEX/uwDvrwD/uwD/uwD/uwD/uwD/uwD/uwD/uwD6twD/uwAAAADurwD2tQD7uAD+ugAAAAD/uwDhmeTRAAAADHRSTlMJ8mN1EYcbmiixgACm7WbuAAAAVklEQVR42n3PUQqAIBBFUU1LLc3u/jdbOJoW1P08DA9Gba8+YWJ6gNJoNYIBzAA2chBth5kLmG9YUoG0NHAUwFXwO9LuBQL1giCQb8gC9Oro2vp5rncCIY8L8uEx5ZkAAAAASUVORK5CYII=');\n  }\n\n  .CodeMirror-lint-marker-multiple {\n    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAMAAADzjKfhAAAACVBMVEUAAAAAAAC/v7914kyHAAAAAXRSTlMAQObYZgAAACNJREFUeNo1ioEJAAAIwmz/H90iFFSGJgFMe3gaLZ0od+9/AQZ0ADosbYraAAAAAElFTkSuQmCC');\n    background-position: right bottom;\n    background-repeat: no-repeat;\n    width: 100%;\n    height: 100%;\n  }\n\n  .CodeMirror-lint-mark-error {\n    &:before {\n      content: '';\n      width: 50px;\n      height: 14px;\n      position: absolute;\n      background: #FF4F56;\n      left: -80px;\n      top: 50%;\n      transform: translateY(-50%);\n      z-index: 10;\n    }\n  }\n\n  .CodeMirror-lint-message-error span {\n    color: white;\n    background: #FF4F56;\n    font-family: 'Source Code Pro', monospace;\n    font-weight: 600;\n    border-radius: 2px;\n    padding: 0 4px;\n  }\n\n  .CodeMirror-hints {\n    background: white;\n    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);\n    font-size: 14px;\n    list-style: none;\n    margin-left: -6px;\n    margin: 0;\n    max-height: 20em;\n    overflow: hidden;\n    padding: 0;\n    position: absolute;\n    z-index: 10;\n    border-radius: 2px;\n    top: 0;\n    left: 0;\n    &:hover {\n      overflow-y: overlay;\n    }\n  }\n\n  .CodeMirror-hints-wrapper {\n    font-family: 'Open Sans', sans-serif;\n    background: white;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);\n    margin-left: -6px;\n    position: absolute;\n    z-index: 10;\n  }\n\n  .CodeMirror-hints-wrapper .CodeMirror-hints {\n    box-shadow: none;\n    margin-left: 0;\n    position: relative;\n    z-index: 0;\n  }\n\n  .CodeMirror-hint {\n    color: rgba(15, 32, 45, 0.6);\n    cursor: pointer;\n    margin: 0;\n    max-width: 300px;\n    overflow: hidden;\n    padding: 6px 12px;\n    white-space: pre;\n  }\n\n  li.CodeMirror-hint-active {\n    background-color: #2a7ed3;\n    border-top-color: white;\n    color: white;\n  }\n\n  .CodeMirror-hint-information {\n    border-top: solid 1px rgba(0, 0, 0, 0.1);\n    max-width: 300px;\n    padding: 10px 12px;\n    position: relative;\n    z-index: 1;\n    background-color: rgba(15, 32, 45, 0.03);\n    font-size: 14px;\n  }\n\n  .CodeMirror-hint-information:first-child {\n    border-bottom: solid 1px #c0c0c0;\n    border-top: none;\n    margin-bottom: -1px;\n  }\n\n  .CodeMirror-hint-information .content {\n    color: rgba(15, 32, 45, 0.6);\n    box-orient: vertical;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    line-clamp: 3;\n    line-height: 1.36;\n    max-height: 59px;\n    overflow: hidden;\n    text-overflow: -o-ellipsis-lastline;\n  }\n\n  .CodeMirror-hint-information .content p:first-child {\n    margin-top: 0;\n  }\n\n  .CodeMirror-hint-information .content p:last-child {\n    margin-bottom: 0;\n  }\n\n  .CodeMirror-hint-information .infoType {\n    color: rgb(241, 143, 1);\n    cursor: pointer;\n    display: inline;\n    margin-right: 0.5em;\n  }\n"])));
var Wrapper = function (_a) {
    var children = _a.children;
    function lintMessage(e) {
        if (e.target.classList.contains('CodeMirror-lint-mark-error')) {
            var items = document.getElementsByClassName('CodeMirror-lint-message-error');
            for (var _i = 0, _a = Array.from(items); _i < _a.length; _i++) {
                var item = _a[_i];
                item.innerHTML = item.innerHTML.replace(/"(.*?)"/g, '<span>$1</span>');
            }
        }
    }
    return (<EditorWrapper onMouseMove={lintMessage}>
      {children}
      <GlobalStyle />
    </EditorWrapper>);
};
var GraphqlContainer = styled_1.styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  color: #141823;\n  display: flex;\n  flex-direction: row;\n  font-family: system, -apple-system, 'San Francisco', '.SFNSDisplay-Regular',\n    'Segoe UI', Segoe, 'Segoe WP', 'Helvetica Neue', helvetica, 'Lucida Grande',\n    arial, sans-serif;\n  font-size: 14px;\n  height: 100%;\n  margin: 0;\n  overflow: hidden;\n  width: 100%;\n"], ["\n  color: #141823;\n  display: flex;\n  flex-direction: row;\n  font-family: system, -apple-system, 'San Francisco', '.SFNSDisplay-Regular',\n    'Segoe UI', Segoe, 'Segoe WP', 'Helvetica Neue', helvetica, 'Lucida Grande',\n    arial, sans-serif;\n  font-size: 14px;\n  height: 100%;\n  margin: 0;\n  overflow: hidden;\n  width: 100%;\n"])));
var Container = /** @class */ (function (_super) {
    __extends(Container, _super);
    function Container() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.getWidth = function () {
            return _this.graphqlContainer.offsetWidth;
        };
        _this.setGraphqlContainer = function (ref) {
            _this.graphqlContainer = ref;
        };
        return _this;
    }
    Container.prototype.render = function () {
        return (<GraphqlContainer ref={this.setGraphqlContainer}>
        {this.props.children}
      </GraphqlContainer>);
    };
    return Container;
}(React.PureComponent));
exports.Container = Container;
exports.default = Wrapper;
var templateObject_1, templateObject_2, templateObject_3;
//# sourceMappingURL=EditorWrapper.jsx.map