@use "tooltip.scss";

/* Editor layout */

.editor {
  height: 100%;
  width: 100%;

}

.cm-lineWrapping{
  word-break: keep-all!important;
  word-wrap: normal!important;
  white-space: nowrap!important;
  overflow-wrap: normal!important;
}

.cm-scroller {
  overflow-y: auto !important;
  background: var(--bg-0);
}

.cm-editor {
  height: 100%;
  background: var(--bg-1);
  color: var(--fg-0);
}

.cm-content{
  caret-color: var(--fg-0)!important;
}

.cm-gutters {
  background: var(--bg-2) !important;
  color: var(--fg-muted);
  border-right: 1px solid color-mix(in srgb, var(--fg-muted) 20%, transparent)!important;
}

.cm-lineNumbers .cm-gutterElement {
  padding: 0 10px 0 6px;
  font-family: var(--font-mono);
}

.cm-activeLine {
  background: color-mix(in srgb, var(--accent) 6%, transparent)!important;
}

.cm-activeLineGutter {
  background: color-mix(in srgb, var(--accent) 8%, transparent)!important;
  color: var(--fg-0);
}

.cm-cursor {
  border-left: 2px solid var(--accent)!important;
}

.cm-focused .cm-cursor {
  border-left-color: var(--accent)!important;
}

/* Syntax colors */

.tok-comment {
  color: color-mix(in srgb, var(--success) 65%, var(--fg-muted));
}

.tok-keyword {
  color: var(--warning);
  font-weight: 600;
}

.tok-error {
  color: var(--error);
  font-weight: 700;
}

.tok-ident {
  color: var(--accent);
}

.tok-brace {
  color: var(--error);
  font-weight: 600;
}

.tok-punc {
  color: var(--fg-0);
}

.tok-string {
  color: color-mix(in srgb, var(--success) 75%, transparent);
}

/* Rainbow brackets */

.rb-0 {
  color: color-mix(in srgb, var(--error) 85%, transparent);
  font-weight: 700;
}

.rb-1 {
  color: color-mix(in srgb, var(--warning) 85%, transparent);
  font-weight: 700;
}

.rb-2 {
  color: color-mix(in srgb, var(--success) 85%, transparent);
  font-weight: 700;
}

.rb-3 {
  color: color-mix(in srgb, var(--accent) 85%, transparent);
  font-weight: 700;
}

.rb-4 {
  color: color-mix(in srgb, var(--focus) 85%, transparent);
  font-weight: 700;
}

.rb-5 {
  color: color-mix(in srgb, var(--accent) 60%, var(--fg-muted));
  font-weight: 700;
}

/* Severity underline styles*/

.cm-diag-error {
  text-decoration: underline wavy var(--error);
  text-underline-offset: 2px;
}

.cm-diag-warning {
  text-decoration: underline wavy var(--warning);
  text-underline-offset: 2px;
}

.cm-diag-info {
  text-decoration: underline wavy var(--accent);
  text-underline-offset: 2px;
}



.cm-highlight {
  border-radius: 4px;
  // padding: 0 1px;
}

.cm-highlight-warning { background: color-mix(in srgb, var(--warning) 40%, var(--bg-0)); }
.cm-highlight-focus { background: color-mix(in srgb, var(--focus) 40%, var(--bg-0)); }
.cm-highlight-success { background: color-mix(in srgb, var(--success) 40%, var(--bg-0)); }
.cm-highlight-error { background: color-mix(in srgb, var(--error) 40%, var(--bg-0)); }