@import (reference) '../variables.less';

.gutter {
  @box-fade-size: 10px;
  width: @code-gutter-size - @box-fade-size;
  background-color: @code-background;
  position: absolute;
  right: @box-fade-size;
  box-shadow: 0 0 @box-fade-size 5px @code-background;
}

.insertionPoint {
  background-color: @code-selection;
}

.marker {
  width: @code-marker-size;
  height: @code-marker-size;
  border-radius: (@code-marker-size / 2);
  background-color: @code-marker-color;
  position: relative;
  top: (@code-marker-size / 2);
  left: 10px;
}

:global {
  .react-codemirror2 {
    height: 100%;
    background-color: @code-background;
  }

  .CodeMirror {
    height: 100%;
    width: 100%;
    font-family: @code-font-family;
    position: relative;
    z-index: 0;
  }

  .CodeMirror-gutters {
    width: @code-gutter-size;
  }

  .CodeMirror-gutter-elt {
    position: relative;
  }

  .CodeMirror pre,
  .CodeMirror-linenumber {
    font-size: 16px;
  }

  .CodeMirror-lines {
    padding: 16px 0;
  }

  .CodeMirror-hints {
    position: absolute;
    z-index: 10;
    overflow: hidden;
    list-style: none;
    margin: 0;
    padding: 0;
    box-shadow: @shadow-small;
    border-radius: @radius-medium;
    background-color: @code-background;
    font-size: 90%;
    line-height: 150%;
    font-family: @code-font-family;
    max-height: 20em;
    overflow-y: auto;
  }

  .CodeMirror-hint {
    margin: 0;
    padding: 4px 8px;
    border-radius: @radius-small;
    white-space: pre;
    color: @black;
    cursor: pointer;
  }

  li.CodeMirror-hint-active {
    background-color: @code-hint-bg;
    color: @code-hint-fg;
  }

  .cm-s-neo {
    &.CodeMirror {
      background-color: @code-background;
    }
    .CodeMirror-cursor {
      background-color: @black;
      width: 2px;
    }
    .CodeMirror-gutters {
      background-color: transparent;
      border: none;
      pointer-events: none;
    }
    .CodeMirror-selected {
      background: @code-selection;
    }
    .CodeMirror-linenumber {
      color: @white;
    }
    .cm-tag {
      color: @code-format-tag;
    }
    .cm-attribute {
      color: @code-format-attribute;
    }
    .cm-string {
      color: @code-format-string;
    }
    .cm-atom {
      color: @code-format-atom;
    }
    .cm-variable {
      color: @code-format-variable;
    }
  }
}