@use 'sass:map';
@use '@fontsource/roboto/scss/mixins' as Roboto;
@use '@fontsource/jetbrains-mono/scss/mixins' as JetbrainsMono;

@import 'codemirror/lib/codemirror';
@import 'codemirror/addon/hint/show-hint';
@import 'codemirror/theme/material-darker';

@import './themes';

$fontWeights: 300, 400, 500, 700;
@each $weight in $fontWeights {
  @include Roboto.fontFace($fontName: 'Roboto', $weight: $weight);
  @include Roboto.fontFace($fontName: 'Roboto', $weight: $weight, $style: italic);
}

$monoFontWeights: 400, 700;
@each $weight in $monoFontWeights {
  @include JetbrainsMono.fontFace($fontName: 'JetBrains Mono', $weight: $weight);
  @include JetbrainsMono.fontFace($fontName: 'JetBrains Mono', $weight: $weight, $style: italic);
}
@include JetbrainsMono.fontFaceVariable($fontName: 'JetBrains MonoVariable');
@include JetbrainsMono.fontFaceVariable($fontName: 'JetBrains MonoVariable', $style: italic);

body {
  font-family: 'Roboto', sans-serif;
}

.CodeMirror {
  height: 100%;
}

.problem-fallback-editor {
  display: block;
  height: 100%;
  width: 100%;
  resize: none;
  border: none;
  outline: none;
  padding: 4px 4px 4px 16px;
  white-space: pre;
  overflow-wrap: normal;
  overflow: auto;
}

.CodeMirror, .CodeMirror-hints, .problem-fallback-editor {
  font-size: 16px;
  font-family: 'JetBrains MonoVariable', 'JetBrains Mono', monospace;
  font-feature-settings: 'liga', 'calt';
  font-weight: 400;
  text-rendering: optimizeLegibility;
  line-height: 1.35;
  letter-spacing: 0;
}

@each $themeName, $theme in $themes {
  .cm-s-problem-#{$themeName} {
    &.CodeMirror {
      background: map.get($theme, 'background');
      color: map.get($theme, 'foreground');
    }

    &.problem-fallback-editor {
      background: map.get($theme, 'background');
      color: map.get($theme, 'foreground');
      caret-color: map.get($theme, 'cursor');

      &::selection {
        background: map.get($theme, 'selection');
      }
    }

    .CodeMirror-gutters {
      background: map.get($theme, 'background');
      border: none;
    }

    .CodeMirror-cursor {
      border-left: 1px solid map.get($theme, 'cursor');
    }

    div.CodeMirror-selected,
    &.CodeMirror-focused div.CodeMirror-selected,
    .CodeMirror-line::selection,
    .CodeMirror-line > span::selection,
    .CodeMirror-line > span > span::selection {
      background: map.get($theme, 'selection');
    }

    .CodeMirror-guttermarker,
    .CodeMirror-guttermarker-subtle,
    .CodeMirror-linenumber {
      color: map.get($theme, 'lineNumber');
    }

    .CodeMirror-activeline-background {
      background: map.get($theme, 'currentLine');
    }

    .CodeMirror-activeline-gutter {
      background: map.get($theme, 'currentLine');

      .CodeMirror-guttermarker,
      .CodeMirror-guttermarker-subtle,
      .CodeMirror-linenumber {
        color: map.get($theme, 'foreground');
      }
    }

    .cm-keyword {
      color: map.get($theme, 'keyword');
    }

    .cm-number {
      color: map.get($theme, 'number');
    }

    .cm-lparen, .cm-rparen {
      color: map.get($theme, 'delimiter');
    }

    .cm-comment {
      color: map.get($theme, 'comment');
      font-style: italic;
    }

    .problem-predicate, .problem-class, .problem-reference, .problem-enum {
      color: map.get($theme, 'predicate');
    }

    .problem-unique-node {
      color: map.get($theme, 'uniqueNode');
    }

    .problem-variable {
      color: map.get($theme, 'variable');
    }
  }
}

.CodeMirror-hints {
  background: #333;
  border: 0;
  border-radius: 4px;
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2),
              0 5px 8px 0 rgba(0, 0, 0, 0.14),
              0 1px 8px 0 rgba(0, 0, 0, 0.12);
  padding: 0;
}

.CodeMirror-hint {
  color: #fff;
  border-radius: 0;
}

li.CodeMirror-hint-active {
  background: rgba(128, 203, 196, 0.2);
}

.annotations-gutter {
	width: 12px;
}

.xtext-annotation_error {
	width: 12px;
	height: 1em;
	background-image: url('images/error_an.gif');
	background-repeat: no-repeat;
  background-position: bottom;
}

.xtext-annotation_warning {
	width: 12px;
	height: 1em;
	background-image: url('images/warning_an.gif');
	background-repeat: no-repeat;
  background-position: bottom;
}

.xtext-annotation_info {
	width: 12px;
	height: 1em;
	background-image: url('images/info_an.gif');
	background-repeat: no-repeat;
  background-position: bottom;
}

.xtext-marker_error {
	z-index: 30;
	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAABmJLR0QA/wD/AP+gvaeTAAAAHElEQVQI12NggIL/DAz/GdA5/xkY/qPKMDAwAADLZwf5rvm+LQAAAABJRU5ErkJggg==");
	background-repeat: repeat-x;
	background-position: left bottom;
}

.xtext-marker_warning {
	z-index: 20;
	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAABmJLR0QA/wD/AP+gvaeTAAAAMklEQVQI12NkgIIvJ3QXMjAwdDN+OaEbysDA4MPAwNDNwMCwiOHLCd1zX07o6kBVGQEAKBANtobskNMAAAAASUVORK5CYII=");
	background-repeat: repeat-x;
	background-position: left bottom;
}

.xtext-marker_info {
	z-index: 10;
	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAABmJLR0QA/wD/AP+gvaeTAAAANklEQVQI12NkgIIVRx8tZGBg6GZccfRRKAMDgw8DA0M3AwPDIiYGBoZKBgaG7ghruSsMDAwpABH5CoqwzCoTAAAAAElFTkSuQmCC");
	background-repeat: repeat-x;
	background-position: left bottom;
}

.xtext-marker_read {
  background: rgba(128, 203, 196, 0.2);
  display: inline-block;
}


.xtext-marker_write {
  background: rgba(255, 229, 100, 0.2);
  display: inline-block;
}

.problem-abstract {
  font-style: italic;
}

.problem-containment {
	font-weight: 700;
}
.problem-new-node {
  font-style: italic;
}