/* Extra values we can use if we decide we need more control in the future */
@property --bg-angle {
  inherits: false;
  initial-value: 0turn;
  syntax: "<angle>";
}
@-webkit-keyframes gradient-spin {
  to {
    --bg-angle: 1turn;
  }
}
@keyframes gradient-spin {
  to {
    --bg-angle: 1turn;
  }
}
:export {
  --theme-default: Dark;
  --theme-dark: Dark;
  --theme-light: Light;
}

.cm-header {
  font-weight: bold;
}

.cm-strong {
  font-weight: bold;
}

.cm-em {
  font-style: italic;
}

:root {
  --editor-top-bar-background: rgb(28.35, 28.35, 28.35);
  --tab-bg: #1d1e22;
  --tab-border-color: rgb(52.4761904762, 54.2857142857, 61.5238095238);
  --resizer-background: var(--editor-top-bar-background);
  --resizer-border: rgb(44.91, 44.91, 44.91);
}

.CodeMirror-cursor {
  border-left-color: white !important;
}

.cm-fat-cursor .CodeMirror-cursor {
  background: #13ff0f !important;
  border-left-color: transparent !important;
  opacity: 0.5;
}

.CodeMirror-selected {
  background: rgba(255, 255, 255, 0.05);
}

.CodeMirror-focused .CodeMirror-selected {
  background: rgba(255, 255, 255, 0.1);
}

.CodeMirror-matchingbracket {
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

.CodeMirror-matchingtag {
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.cm-searching {
  background: black;
  outline: 2px solid rgba(255, 255, 255, 0.25);
}

.CodeMirror-hints,
.emmet-abbreviation-preview {
  border: 1px solid #5a5f73;
  background: #1e1f26;
}

.CodeMirror-hint {
  color: white;
}

li.CodeMirror-hint-active {
  background: #c7c9d3;
  color: black;
}

/* Projects */
.project-editor-warning {
  background: rgba(255, 255, 255, 0.1);
}

.editor-footer {
  border-top-color: var(--resizer-border, var(--cp-color-6));
}

.cm-keyword {
  color: #ddca7e;
}

.cm-atom {
  color: #ddca7e;
}

.box-html .cm-atom {
  color: #96b38a;
}

.cm-number {
  color: #d0782a;
}

.cm-unit {
  color: #d0782a;
}

.cm-def {
  color: #809bbd;
}

.cm-variable {
  color: #ddca7e;
}

.cm-variable-2 {
  color: #809bbd;
}

.cm-property {
  color: #9a8297;
}

.cm-operator {
  color: #ccc;
}

.cm-comment {
  color: #717790;
}

.cm-string {
  color: #96b38a;
}

.cm-string-2 {
  color: #96b38a;
}

.cm-meta {
  color: #9a8297;
}

.cm-header {
  color: #ff6400;
}

.cm-tag {
  color: #a7925a;
}

.box-css .cm-tag {
  color: #ddca7e;
}

.cm-attribute {
  color: #ddca7e;
}

.cm-strong {
  color: #ddca7e;
}

.cm-em {
  color: #ddca7e;
}

.cm-qualifier {
  color: #ddca7e;
}

.cm-builtin {
  color: #ddca7e;
}

body.editor {
  background: #1d1e22;
}

.box.box.box,
.editor .top-boxes,
.CodeMirror-gutter-wrapper,
body.project .editor-pane,
body.project .editor {
  background: #1d1e22;
}
.box.box.box pre,
.editor .top-boxes pre,
.CodeMirror-gutter-wrapper pre,
body.project .editor-pane pre,
body.project .editor pre {
  color: white;
}

.CodeMirror-guttermarker-subtle,
.CodeMirror-linenumber {
  color: #34363e;
}

#output pre::-webkit-scrollbar,
#output iframe::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
#output pre::-webkit-scrollbar-thumb,
#output iframe::-webkit-scrollbar-thumb {
  background: #666b7a;
  border-radius: 1px;
}
#output pre::-webkit-scrollbar-track,
#output iframe::-webkit-scrollbar-track {
  background: transparent;
}
#output pre::-webkit-scrollbar-corner,
#output iframe::-webkit-scrollbar-corner {
  background: transparent;
}
@supports not selector(::-webkit-scrollbar) {
  #output pre,
  #output iframe {
    scrollbar-color: #666b7a transparent;
    scrollbar-width: thin;
  }
}

.CodeMirror-simplescroll-horizontal div,
.CodeMirror-simplescroll-vertical div {
  background: #666b7a;
}