react-native-devtools-frontend/front_end/text_editor/cmdevtools.css

.CodeMirror {
  --breakpoint-background-red: #ff4e4226;
}

:host-context(.-theme-with-dark-background) .CodeMirror,
.-theme-with-dark-background .CodeMirror {
  --breakpoint-background-red: #ff4e4233;
}

.CodeMirror {
  line-height: 1.2em !important;
  background-color: transparent !important;
  color: #222;
  height: 300px;
}

.CodeMirror-linewidget {
  overflow: visible !important;
}

.CodeMirror-gutter-performance {
  width: 60px;
  background-color: white;
  margin-left: 3px;
}

.CodeMirror-gutter-memory {
  width: 48px;
  background-color: white;
  margin-left: 3px;
}

.CodeMirror-gutter-coverage {
  width: 5px;
  background-color: white;
  margin-left: 3px;
}

.CodeMirror-gutter-breakpoints {
  width: 10px;
  margin: 0 -4px 0 2px;
  pointer-events: none;
  cursor: default;
}

.CodeMirror .source-frame-eval-expression {
  outline: 0;
  border: 1px solid rgb(163 41 34);
  border-left-width: 0;
  border-right-width: 0;
  background-color: rgb(255 255 194);
}

.CodeMirror .source-frame-eval-expression-start {
  border-left-width: 1px;
  margin-left: -1px;
}

.CodeMirror .source-frame-eval-expression-end {
  border-right-width: 1px;
  margin-right: -1px;
}

.CodeMirror .source-frame-continue-to-location {
  outline: 0;
  border: 1px solid transparent;
  border-left-width: 0;
  border-right-width: 0;
  background-color: rgb(230 236 255);
  cursor: pointer;
}

.CodeMirror .source-frame-continue-to-location:hover {
  border: 1px solid rgb(121 141 254);
  background-color: rgb(171 191 254);
}

:host-context(.-theme-with-dark-background) .CodeMirror .source-frame-continue-to-location,
.-theme-with-dark-background .CodeMirror .source-frame-continue-to-location {
  background-color: #14522b;
}

:host-context(.-theme-with-dark-background) .CodeMirror .source-frame-continue-to-location:hover,
.-theme-with-dark-background .CodeMirror .source-frame-continue-to-location:hover {
  border: 1px solid #33cc6b;
  background-color: #14522b;
}

.CodeMirror .source-frame-continue-to-location-start {
  border-left-width: 1px;
  margin-left: -1px;
}

.CodeMirror .source-frame-continue-to-location-end {
  border-right-width: 1px;
  margin-right: -1px;
}

.CodeMirror .source-frame-async-step-in {
  outline: 0;
  background-color: hsl(100deg 46% 80% / 100%);
  cursor: pointer;
  border: 1px solid transparent;
  border-left-width: 0;
  border-right-width: 0;
}

.source-frame-async-step-in-hovered .source-frame-async-step-in {
  background-color: hsl(96deg 53% 65%);
  border-color: rgb(100 154 100);
}

.source-frame-async-step-in-hovered .source-frame-async-step-in-start {
  border-left-width: 1px;
  margin-left: -1px;
}

.source-frame-async-step-in-hovered .source-frame-async-step-in-end {
  border-right-width: 1px;
  margin-right: -1px;
}

.CodeMirror-readonly .CodeMirror-cursor {
  display: none;
}

.CodeMirror-gutters {
  border-right: 1px solid var(--divider-color);
  white-space: nowrap;
  background-color: white;
}

.CodeMirror-linenumber {
  color: hsl(0deg 0% 46%);
  padding: 0 3px 0 5px;
  min-width: 22px;
  text-align: right;
  white-space: nowrap;
}

.pretty-printed .CodeMirror-linenumber {
  color: var(--accent-color);
}

.cm-highlight {
  -webkit-animation: fadeout 2s 0s;
}

:host-context(.-theme-with-dark-background) .cm-highlight,
.-theme-with-dark-background .cm-highlight {
  -webkit-animation: fadeout-dark 2s 0s;
}

@-webkit-keyframes fadeout {
  from { background-color: rgb(255 255 120); }
  to { background-color: white; }
}

@-webkit-keyframes fadeout-dark {
  from { background-color: hsl(133deg 100% 30% / 50%); }
  to { background-color: transparent; }
}

.cm-readonly-highlight {
  background-color: rgb(255 255 120);
}

:host-context(.-theme-with-dark-background) .cm-readonly-highlight,
.-theme-with-dark-background .cm-readonly-highlight {
  background-color: hsl(133deg 100% 30% / 50%);
}

.cm-highlight.cm-execution-line {
  -webkit-animation: fadeout-execution-line 1s 0s;
}

:host-context(.-theme-with-dark-background) .cm-highlight.cm-execution-line,
.-theme-with-dark-background .cm-highlight.cm-execution-line {
  -webkit-animation: fadeout-execution-line-dark 1s 0s;
}

@-webkit-keyframes fadeout-execution-line {
  from { background-color: rgb(121 141 254); }
  to { background-color: rgb(171 191 254); }
}

@-webkit-keyframes fadeout-execution-line-dark {
  from { background-color: #208043; }
  to { background-color: #14522b; }
}

.cm-non-breakable-line .CodeMirror-linenumber {
  color: rgb(128 128 128 / 40%);
}

.breakpoint-element {
  padding-top: 1.5px;
}

.breakpoint-element::before {
  content: "\00AD";
}

.CodeMirror-gutter-background.cm-breakpoint {
  background-color: var(--breakpoint-background-red);
}

.cm-breakpoint .breakpoint-element::before {
  content: url(Images/breakpoint.svg);
}

.breakpoints-deactivated .cm-breakpoint .breakpoint-element::before,
.cm-breakpoint-unbound .breakpoint-element::before,
.cm-breakpoint-disabled .breakpoint-element::before {
  content: url(Images/breakpoint-disabled.svg);
}

.cm-breakpoint.cm-breakpoint-conditional .breakpoint-element::before {
  content: url(Images/breakpoint-conditional.svg);
}

.cm-breakpoint-disabled.cm-breakpoint-conditional .breakpoint-element::before,
.cm-breakpoint-unbound.cm-breakpoint-conditional .breakpoint-element::before,
.breakpoints-deactivated .cm-breakpoint.cm-breakpoint-conditional .breakpoint-element::before {
  content: url(Images/breakpoint-conditional-disabled.svg);
}

.cm-breakpoint.cm-breakpoint-logpoint .breakpoint-element::before {
  content: url(Images/logpoint.svg);
}

.cm-breakpoint-disabled.cm-breakpoint-logpoint .breakpoint-element::before,
.cm-breakpoint-unbound.cm-breakpoint-logpoint .breakpoint-element::before,
.breakpoints-deactivated .cm-breakpoint.cm-breakpoint-logpoint .breakpoint-element::before {
  content: url(Images/logpoint-disabled.svg);
}

.cm-inline-breakpoint {
  cursor: pointer;
  padding-left: 1px;
  padding-right: 2px;
  position: relative;
  top: 1px;
}

.cm-inline-breakpoint::before {
  content: url(Images/breakpoint.svg);
}

.cm-inline-breakpoint.cm-inline-disabled::before {
  content: url(Images/breakpoint-disabled.svg);
}

.breakpoints-deactivated .cm-inline-breakpoint::before {
  content: url(Images/breakpoint-disabled.svg);
}

.cm-inline-breakpoint.cm-inline-breakpoint-conditional::before {
  content: url(Images/breakpoint-conditional.svg);
}

.cm-inline-breakpoint.cm-inline-breakpoint-conditional.cm-inline-disabled::before {
  content: url(Images/breakpoint-conditional-disabled.svg);
}

.breakpoints-deactivated .cm-inline-breakpoint.cm-inline-breakpoint-conditional::before {
  content: url(Images/breakpoint-conditional-disabled.svg);
}

.cm-inline-breakpoint.cm-inline-logpoint::before {
  content: url(Images/logpoint.svg);
}

.cm-inline-breakpoint.cm-inline-logpoint.cm-inline-disabled::before {
  content: url(Images/logpoint-disabled.svg);
}

.breakpoints-deactivated .cm-inline-breakpoint.cm-inline-logpoint::before {
  content: url(Images/logpoint-disabled.svg);
}

.cm-execution-line-tail + .CodeMirror-widget {
  background-color: #abbffe;
}

.source-frame-eval-expression + .CodeMirror-widget {
  border: 1px solid rgb(163 41 34);
  border-left-width: 0;
  border-right-width: 0;
  background-color: rgb(255 255 194);
}

.cm-inline-breakpoint.cm-execution-line-tail {
  background-color: #698cfe;
}

.cm-execution-line-tail .cm-inline-breakpoint {
  background-color: white;
}

.cm-inline-breakpoint.cm-inline-conditional {
  background-color: #ef9d0d;
}

.cm-continue-to-location {
  cursor: pointer;
  opacity: 80%;
  position: relative;
  top: 2px;
}

.cm-continue-to-location:hover {
  opacity: 100%;
}

div.CodeMirror:focus-within span.CodeMirror-matchingbracket {
  background-color: rgb(0 0 0 / 7.000000000000001%);
  border-bottom: 1px solid rgb(0 0 0 / 50%);
}

div.CodeMirror:focus-within span.CodeMirror-nonmatchingbracket {
  background-color: rgb(255 0 0 / 7.000000000000001%);
  border-bottom: 1px solid rgb(255 0 0 / 50%);
}

:host-context(.-theme-with-dark-background) div.CodeMirror:focus-within span.CodeMirror-matchingbracket,
.-theme-with-dark-background div.CodeMirror:focus-within span.CodeMirror-matchingbracket {
  border-bottom: 1px solid rgb(217 217 217);
  background-color: initial;
}

:host-context(.-theme-with-dark-background) div.CodeMirror:focus-within span.CodeMirror-nonmatchingbracket,
.-theme-with-dark-background div.CodeMirror:focus-within span.CodeMirror-nonmatchingbracket {
  border-bottom: 1px solid rgb(255 26 26);
  background-color: initial;
}

.cm-whitespace::before {
  position: absolute;
  pointer-events: none;
  color: rgb(175 175 175);
}

.cm-tab {
  display: inline-block;
  text-decoration: inherit;
  position: relative;
}

.cm-tab::before {
  display: none;
  content: ".";
  color: transparent;
  border-bottom: 1px solid rgb(175 175 175);
  position: absolute;
  width: 90%;
  bottom: 50%;
  left: 5%;
}

.show-whitespaces .CodeMirror .cm-tab::before {
  display: block !important;
}

.cm-execution-line {
  background-color: rgb(0 59 255 / 10%);
}

.cm-execution-line-outline {
  outline: 1px solid rgb(64 115 244);
}

.cm-execution-line-tail {
  background-color: rgb(171 191 254);
}

:host-context(.-theme-with-dark-background) .cm-execution-line,
.-theme-with-dark-background .cm-execution-line {
  background-color: #14522b;
}

:host-context(.-theme-with-dark-background) .cm-execution-line-outline,
.-theme-with-dark-background .cm-execution-line-outline {
  outline: 1px solid #33cc6b;
}

:host-context(.-theme-with-dark-background) .cm-execution-line-tail,
.-theme-with-dark-background .cm-execution-line-tail {
  background-color: #347132;
}

.cm-token-highlight {
  position: relative;
}

.cm-token-highlight::before {
  position: absolute;
  border: 1px solid gray;
  border-radius: 3px;
  top: 0;
  bottom: -1px;
  left: 0;
  right: 0;
  content: "";
}

.cm-line-with-selection .cm-column-with-selection::before {
  border: none;
}

.cm-search-highlight {
  position: relative;
}

.cm-search-highlight::before {
  position: absolute;
  border-top-style: solid;
  border-bottom-style: solid;
  border-top-color: gray;
  border-bottom-color: gray;
  border-top-width: 1px;
  border-bottom-width: 1px;
  top: -1px;
  bottom: 0;
  left: 0;
  right: 0;
  content: "";
}

.cm-search-highlight-full::before {
  border: 1px solid gray;
  border-radius: 3px;
}

.cm-search-highlight-start::before {
  border-left-width: 1px;
  border-top-left-radius: 2px;
  border-bottom-left-radius: 2px;
  border-left-style: solid;
  border-left-color: gray;
}

.cm-search-highlight-end::before {
  border-right-width: 1px;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
  border-right-style: solid;
  border-right-color: gray;
}

.cm-line-with-selection .cm-column-with-selection.cm-search-highlight-full::before {
  border-radius: 1px;
}

.cm-line-with-selection .cm-column-with-selection.cm-search-highlight-start::before {
  border-top-left-radius: 1px;
  border-bottom-left-radius: 1px;
}

.cm-line-with-selection .cm-column-with-selection.cm-search-highlight-end::before {
  border-top-right-radius: 1px;
  border-bottom-right-radius: 1px;
}

.cm-line-with-selection .cm-column-with-selection.cm-search-highlight::before {
  margin: -1px -1px -1px -1px;
  background-color: rgb(241 234 0);
  z-index: -1;
}

:host-context(.-theme-with-dark-background) .cm-line-with-selection .cm-column-with-selection.cm-search-highlight::before,
.-theme-with-dark-background .cm-line-with-selection .cm-column-with-selection.cm-search-highlight::before {
  background-color: hsl(133deg 100% 30%);
}

:host-context(.-theme-with-dark-background) .cm-line-with-selection .cm-search-highlight,
.-theme-with-dark-background .cm-line-with-selection .cm-search-highlight {
  color: #eee;
}

.CodeMirror .text-editor-line-marker-text {
  text-align: right;
  padding-right: 3px;
  height: 12px;
}

.CodeMirror .text-editor-line-marker-text span.line-marker-units {
  color: #555;
  font-size: 75%;
  margin-left: 3px;
}

.CodeMirror .text-editor-coverage-unused-marker {
  text-align: right;
  padding-right: 2px;
  background-color: #ee442f;
}

.CodeMirror .text-editor-coverage-unused-marker::after {
  content: "\200B";
}

.CodeMirror .text-editor-coverage-used-marker {
  text-align: right;
  padding-right: 2px;
  background-color: #63acbe;
}

.CodeMirror .text-editor-coverage-used-marker::after {
  content: "\200B";
}

.CodeMirror .text-editor-line-decoration {
  position: absolute;
}

.CodeMirror .text-editor-line-decoration-wave {
  position: absolute;
  top: -2px;
  right: -4px;
  left: 4px;
  cursor: pointer;
  height: 4px;
}

.CodeMirror .text-editor-value-decoration {
  position: absolute;
  bottom: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 1000px;
  opacity: 80%;
  background-color: #ffe3c7;
  margin-left: 10px;
  padding-left: 5px;
  color: #222;
  user-select: text;
}

.CodeMirror .cm-execution-line .text-editor-value-decoration {
  background-color: transparent;
  opacity: 50%;
}

.CodeMirror .text-editor-line-decoration-icon {
  position: absolute;
  cursor: pointer;
  right: -16px;
  top: -9px;
}

.CodeMirror .text-editor-line-with-warning:not(.cm-execution-line):not(.cm-readonly-highlight) {
  background-color: rgb(241 230 0 / 10%);
}

.CodeMirror .text-editor-line-with-error:not(.cm-execution-line):not(.cm-readonly-highlight) {
  background-color: rgb(255 0 0 / 5%);
}

.CodeMirror .text-editor-line-decoration-wave {
  background-image: url(Images/errorWave.svg);
  background-repeat: repeat-x;
  background-size: contain;
}

/** @see crbug.com/358161 */

.CodeMirror .CodeMirror-vscrollbar,
.CodeMirror .CodeMirror-hscrollbar {
  transform: translateZ(0);
}

.cm-trailing-whitespace {
  background-color: rgb(255 0 0 / 5%);
}

.CodeMirror-activeline .cm-trailing-whitespace {
  background-color: transparent;
}

:host-context(.-theme-with-dark-background) .CodeMirror .CodeMirror-selected,
.-theme-with-dark-background .CodeMirror .CodeMirror-selected {
  background-color: #454545;
}

.CodeMirror .auto-complete-text {
  color: rgb(128 128 128);
}

.CodeMirror .placeholder-text {
  height: 0;
  color: rgb(128 128 128);
}

/** Prevent the codemirror textarea from stealing PageUp events **/

.CodeMirror textarea {
  resize: none;
  overflow: hidden;
}

.CodeMirror-lines {
  padding: 4px 0; /* Vertical padding around content */
}

.CodeMirror pre {
  padding: 0 4px; /* Horizontal padding of content */
}

.CodeMirror-scrollbar-filler,
.CodeMirror-gutter-filler {
  background-color: white; /* The little square between H and V scrollbars */
}

.CodeMirror-cursor {
  border-left: 1px solid black;
  border-right: none;
  width: 0;
}

/* Shown when moving in bi-directional text */

.CodeMirror div.CodeMirror-secondarycursor {
  border-left: 1px solid silver;
}

.CodeMirror-composing {
  border-bottom: 2px solid;
}

.pretty-printed .CodeMirror-linenumber {
  color: var(--accent-color);
}

.CodeMirror-foldmarker {
  cursor: pointer;
  font-size: 0;
  line-height: 0;
  height: 0;
}

.CodeMirror-foldmarker::before {
  content: '\2026';
  font-size: 13px;
  color: #666;
}

.CodeMirror-foldgutter {
  width: 1.5em;
}

.CodeMirror-gutters:hover .CodeMirror-foldgutter {
  background-color: transparent;
}

.CodeMirror-foldgutter-open,
.CodeMirror-foldgutter-folded {
  cursor: pointer;
  position: relative;
}

.CodeMirror-foldgutter-open {
  transition: opacity 0.2s;
  opacity: 0%;
}

.CodeMirror-gutter-hovered .CodeMirror-foldgutter-open {
  opacity: 100%;
}

.CodeMirror-foldgutter-open::before,
.CodeMirror-foldgutter-folded::before {
  background-color: #727272;
  user-select: none;
  -webkit-mask-image: url(Images/treeoutlineTriangles.svg);
  -webkit-mask-size: 32px 24px;
  content: "";
  display: block;
  width: 8px;
  color: transparent;
  text-shadow: none;
  height: 12px;
  position: absolute;
  right: 4px;
}

.CodeMirror-foldgutter-open::before {
  -webkit-mask-position: -16px 0;
}

.CodeMirror-foldgutter-folded::before {
  -webkit-mask-position: 0 0;
}

.CodeMirror .CodeMirror-selected {
  background-color: var(--item-selection-inactive-bg-color);
}

.CodeMirror-focused .CodeMirror-selected {
  background-color: var(--item-selection-bg-color);
}

.CodeMirror .CodeMirror-line::selection,
.CodeMirror .CodeMirror-line > span::selection,
.CodeMirror .CodeMirror-line > span > span::selection {
  background: var(--item-selection-bg-color);
}

@media (forced-colors: active) {
  .cm-token-highlight::before {
    forced-color-adjust: none;
    border-color: Highlight;
  }
}