/**
 * Copyright 2021 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

.Firestore-Request-Details-Code-Section {
  // Overflow behavior: make the inside content of the code viewer scrollable
  width: 60%;
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  overflow: auto;
  display: flex;
  flex-direction: column;
  // Hide code viewer for mobile
  @media screen and (max-width: 500px) {
    display: none;
  }
  // Hide non-necessary textarea coming from CodeMirror (visible for a second when loading)
  & > textarea {
    display: none;
  }
  // CodeMirror styles override
  .CodeMirror {
    font-size: 14px;
    font-family: 'Roboto Mono', monospace;
  }
  .CodeMirror-sizer,
  .CodeMirror-gutter,
  .CodeMirror-gutters,
  .CodeMirror-linenumber.CodeMirror-linenumber {
    margin-right: 28px;
  }
  .CodeMirror-gutter-elt {
    // Outcome Icon
    .CodeMirror-gutter-icon {
      left: 40px;
      position: absolute;
      padding: 1px 4px;
      font-size: 15px;
      &.allow {
        color: var(--emulator-ui-code-success-primary);
        background-color: var(--emulator-ui-code-success-background);
      }
      &.deny,
      &.error {
        color: var(--emulator-ui-code-error-primary);
        background-color: var(--emulator-ui-code-error-background);
      }
    }
  }
  .CodeMirror-code {
    // Highlight line of code.
    .highlighted-line-of-code--allow {
      background-color: var(--emulator-ui-code-success-background);
    }
    .highlighted-line-of-code--deny,
    .highlighted-line-of-code--error {
      background-color: var(--emulator-ui-code-error-background);
    }
    // Change color of comments
    span.cm-comment {
      color: var(--emulator-ui-code-comment-text);
    }
  }
  // Move the code a little bit to the left to remove the
  // gap between the hightlighted-line and the left-border
  .CodeMirror-lines {
    left: -2px;
    position: relative;
  }
  // Make sure the gutters (where the line numbers are) have always the same width,
  // so that the icon's background is always exaclty next to the border
  .CodeMirror-gutters {
    width: 61px !important;
  }
}

/* CodeMirror theme, based on http://go/firebase-console-codemirror-theme */

.cm-s-devsite-light {
  background-color: white;
  color: #374747;
}

.cm-s-devsite-light .CodeMirror-cursor {
  border-left: 1px solid #374747;
}

.cm-s-devsite-light div.CodeMirror-selected {
  background-color: #ebebeb;
}

.cm-s-devsite-light.CodeMirror-focused div.CodeMirror-selected {
  background-color: #ebebeb;
}

.cm-s-devsite-light .CodeMirror-line::selection,
.cm-s-devsite-light .CodeMirror-line > span::selection,
.cm-s-devsite-light .CodeMirror-line > span > span::selection {
  background-color: #ebebeb;
}

.cm-s-devsite-light .CodeMirror-line::-moz-selection,
.cm-s-devsite-light .CodeMirror-line > span::-moz-selection,
.cm-s-devsite-light .CodeMirror-line > span > span::-moz-selection {
  background-color: #ebebeb;
}

.cm-s-devsite-light .CodeMirror-activeline-background {
  background-color: rgba(3, 155, 229, 0.1);
}

/* extra specificity needed to overwrite other rules */
.CodeMirror.cm-s-devsite-light span.CodeMirror-matchingbracket {
  text-decoration: underline;
  color: #374747;
}

.cm-s-devsite-light .CodeMirror-foldmarker {
  color: #bf360c;
  text-shadow: #bf360c 1px 1px 2px, #bf360c -1px -1px 2px, #bf360c 1px -1px 2px,
    #bf360c -1px 1px 2px;
}

.cm-s-devsite-light .cm-trailingspace {
  border-bottom: 1px dashed red;
}

.cm-s-devsite-light .cm-keyword {
  color: #303f9f;
}

.cm-s-devsite-light .cm-operator {
  color: #374747;
}

.cm-s-devsite-light .cm-variable-2 {
  color: #ab47bc;
}

.cm-s-devsite-light .cm-variable-3 {
  color: #ab47bc;
}

.cm-s-devsite-light .cm-builtin {
  color: #decb6b;
}

.cm-s-devsite-light .cm-atom {
  color: #bf360c;
}

.cm-s-devsite-light .cm-number {
  color: #bf360c;
}

.cm-s-devsite-light .cm-def {
  color: #374747;
}

.cm-s-devsite-light .cm-error {
  color: rgba(255, 255, 255, 1);
  background-color: #ec5f67;
}
.cm-s-devsite-light .cm-string {
  color: #0b8043;
}

.cm-s-devsite-light .cm-string-2 {
  color: #0b8043;
}

.cm-s-devsite-light .cm-comment {
  color: #d81b60;
}

.cm-s-devsite-light .cm-variable {
  color: #374747;
}

.cm-s-devsite-light .cm-tag {
  color: #80cbc4;
}

.cm-s-devsite-light .cm-meta {
  color: #80cbc4;
}

.cm-s-devsite-light .cm-attribute {
  color: #ffcb6b;
}

.cm-s-devsite-light .cm-property {
  color: #374747;
}

.cm-s-devsite-light .cm-qualifier {
  color: #decb6b;
}

.cm-s-devsite-light .cm-tag {
  color: rgba(255, 83, 112, 1);
}

.cm-s-devsite-light .CodeMirror-code .CodeMirror-line .text-range-highlighted {
  background-color: #374747;
  color: #000;
}
