@import (less) 'codemirror/lib/codemirror.css';
@import (less) 'codemirror/addon/fold/foldgutter.css';
@import (less) 'codemirror/addon/search/matchesonscrollbar.css';
@import (less) 'codemirror/addon/dialog/dialog.css';

@keyframes sourceMoveAnimation {
	50%  {background-color: red;   color: white;}
	100% {background-color: unset; color: unset;}
}

.codeEditor{
  @media screen and (pointer : coarse) {
    font-size : 16px;
  }
  .CodeMirror-foldmarker {
    font-family: inherit;
    text-shadow: none;
    font-weight: 600;
    color: grey;
  }

  .sourceMoveFlash .CodeMirror-line{
    animation-name: sourceMoveAnimation;
    animation-duration: 0.4s;
  }

  .CodeMirror-sizer {
    padding-right: 0 !important;
    //this setting must be !important, because CodeMirror sets it inline. Achieves overlay scrollbar
  }

  .CodeMirror-vscrollbar {

    &::-webkit-scrollbar {
      width: 20px;
    }
  
    &::-webkit-scrollbar-thumb {
      width: 20px;
      background: linear-gradient(90deg, #85858599 15px, #80808000 15px);
    }
  }

  //.cm-tab {
  //  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAMCAQAAACOs/baAAAARUlEQVR4nGJgIAG8JkXxUAcCtDWemcGR1lY4MvgzCEKY7jSBjgxBDAG09UEQzAe0AMwMHrSOAwEGRtpaMIwAAAAA//8DAG4ID9EKs6YqAAAAAElFTkSuQmCC) no-repeat right;
  //}

  //.cm-trailingspace {
  //  .cm-space {
  //    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAQAgMAAABW5NbuAAAACVBMVEVHcEwAAAAAAAAWawmTAAAAA3RSTlMAPBJ6PMxpAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAFUlEQVQI12NgwACcCQysASAEZGAAACMuAX06aCQUAAAAAElFTkSuQmCC) no-repeat right;
  //  }
  //}
}