/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

.codeView {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-flow: column;
  background: white;

  /* Extra intermediate colors which Photon doesn't have, from
     https://searchfox.org/mozilla-central/rev/8012bca692dddb307c2787bac1d4dd48cb0d8243/devtools/client/themes/variables.css#34-100 */
  --blue-55: #0074e8;
  --magenta-65: #dd00a9;

  /* Theme colors. Loosely based on the Firefox devtools light theme as of Jan 2022. */
  --theme-highlight-keyword: var(--magenta-65);
  --theme-highlight-type: var(--purple-60);
  --theme-highlight-variable: var(--blue-55);
  --theme-highlight-method: var(--green-70);
  --theme-highlight-literal: var(--blue-70);
  --theme-highlight-comment: var(--grey-50);
  --theme-highlight-punctuation: var(--grey-70);
}

.codeViewHeader {
  display: flex;
  height: 16px;
  flex-flow: row;
  padding: 1px 0;
  border-bottom: 1px solid var(--grey-30);
  background: white;
}

.codeMirrorContainer {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-flow: column;
}

.cm-editor {
  min-height: 0;
}

.cm-scroller {
  overflow: auto;
  font: inherit !important;
  line-height: 16px !important;
}

.cm-gutters {
  border-right: 0 !important;
  background-color: white !important;
}

.codeViewHeaderMainColumn {
  flex: 1;
}

.codeViewHeaderColumn {
  position: relative;
  box-sizing: border-box;
  padding: 1px 5px;
  line-height: 15px;
  white-space: nowrap;
}

/* A small vertical separator line */
.codeViewHeaderColumn.codeViewFixedColumn::after {
  position: absolute;
  top: 3px;
  right: 0;
  bottom: 3px;
  width: 1px;
  background: #e5e5e5;
  content: '';
}

.codeViewHeaderColumn.total,
.codeViewHeaderColumn.self,
.cm-total-timings-gutter,
.cm-self-timings-gutter {
  width: 50px;
  text-align: right;
}

.cm-total-timings-gutter,
.cm-self-timings-gutter {
  border-right: 1px solid var(--grey-30);
  color: black;
}

.cm-lineNumbers {
  color: #aaa;
  font-variant-numeric: tabular-nums;
}

.cm-lineNumbers .cm-gutterElement {
  min-width: 45px !important;
}

.cm-instruction-address-gutter {
  color: #aaa;
  font-family: ui-monospace, 'Roboto Mono', monospace;
  font-variant-numeric: tabular-nums;
}

.cm-instruction-address-gutter .cm-gutterElement {
  min-width: 45px !important;
  padding: 0 8px;
}

.cm-total-timings-gutter .cm-gutterElement,
.cm-self-timings-gutter .cm-gutterElement {
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
  padding-right: 5px;
  text-overflow: ellipsis;
}

.cm-nonZeroLine {
  background-color: #edf6ff;
}

.cm-content {
  font-family: ui-monospace, 'Roboto Mono', monospace;
  hyphens: none;
  overflow-wrap: normal;
  word-break: normal;
  word-spacing: normal;
}

/**
 * Syntax highlighting uses the Lezer's classHighlighter. From its documentation:
 *
 *  This is a highlighter that adds stable, predictable classes to tokens, for styling with external CSS.
 *
 *  The following tags are mapped to their name prefixed with "tok-" (for example "tok-comment"):
 *  -  link
 *  -  heading
 *  -  emphasis
 *  -  strong
 *  -  keyword
 *  -  atom bool
 *  -  url
 *  -  labelName
 *  -  inserted
 *  -  deleted
 *  -  literal
 *  -  string
 *  -  number
 *  -  variableName
 *  -  typeName
 *  -  namespace
 *  -  className
 *  -  macroName
 *  -  propertyName
 *  -  operator
 *  -  comment
 *  -  meta
 *  -  punctuation
 *  -  invalid
 *
 *  In addition, these mappings are provided:
 *
 *  -  regexp, escape, and special(string) are mapped to "tok-string2"
 *  -  special(variableName) to "tok-variableName2"
 *  -  local(variableName) to "tok-variableName tok-local"
 *  -  definition(variableName) to "tok-variableName tok-definition"
 *  -  definition(propertyName) to "tok-propertyName tok-definition"
 */

.tok-namespace,
.tok-variableName,
.tok-variableName2,
.tok-macroName {
  color: var(--theme-highlight-variable);
}

.tok-typeName {
  color: var(--theme-highlight-type);
}

.tok-propertyName {
  color: var(--theme-highlight-method);
}

.tok-number,
.tok-string,
.tok-string2 {
  color: var(--theme-highlight-literal);
}

.tok-bool,
.tok-atom,
.tok-error,
.tok-keyword {
  color: var(--theme-highlight-keyword);
}

.tok-comment,
.tok-meta {
  color: var(--theme-highlight-comment);
}

.tok-operator,
.tok-punctuation {
  color: var(--theme-highlight-punctuation);
}
