$gutterWidth: 43px; // enough for 3 chars

// dark theme
$darkBackground: #242e34;
$darkColor: #fff;
$darkHightlight: rgba(#000, 0.25);

// light theme
$lightBackground: #fff;
$lightColor: #000;
$lightHighlight: rgba($lightColor, 0.1);

.CodeEditor {

  &.cm-s-material-palenight {

    &:not(.CodeEditor-Input_highlight) {
      .cm-linerow.cm-overlay,
      .cm-linerow.cm-overlay > span,
      .cm-linerow.cm-overlay > p {
        color: rgba($darkColor, 0.5);
      }
    }

    .cm-highlight {
      background: $darkHightlight;
    }

    .CodeMirror {
      background: $darkBackground;
      color: $darkColor;
    }
  }

  &.cm-s-neo {

    &:not(.CodeEditor-Input_highlight) {
      .cm-linerow.cm-overlay,
      .cm-linerow.cm-overlay > span,
      .cm-linerow.cm-overlay > p {
        color: rgba($lightColor, 0.5);
      }
    }

    .cm-highlight {
      background: $lightHighlight;
    }

    .CodeMirror {
      background: $lightBackground;
      color: $lightColor;
    }
  }

  .cm-linerow.cm-overlay,
  .cm-linerow.cm-overlay .cm-lineNumber {
    opacity: 0.75;
  }
}

// Custom scrollbar styles
// see: https://codemirror.net/5/demo/simplescrollbars.html
.CodeMirror {
  &-scrollbar-filler {
    display: none !important;
  }
  &-overlayscroll {
    &-horizontal div,
    &-vertical div {
      background: rgba(#cacaca, 0.5) !important;
    }
  }
}

.cm-linerow {
  position: relative;
  text-indent: $gutterWidth + 4px;
  transition: background 0.5s cubic-bezier(0.16, 1, 0.3, 1), color 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);

  > span,
  > p {
    transition: color 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  }
}

.cm-lineNumber {
  color: #676e95;
  display: inline-block;
  left: 0;
  margin: 0;
  min-width: $gutterWidth;
  padding: 0 6px 0 10px;
  position: absolute;
  right: auto;
  text-align: right;
  text-indent: 0;
  top: 0;
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);

  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+/Edge */
  user-select: none; /* Standard */
}