:root {
    --color-main-bg: #272a2e;
    --color-primary: #e86c8a;
    --color-green: #77e26a;
    --color-font-primary:  #eeeff1;
    --color-font-secondary: #87888a;
    --font-family-primary: -apple-system, Helvetica, Arial, Verdana, sans-serif;
    --font-family-editor: Monaco, monospace;
    --transition: 250ms linear;
    --disabled-opacity: 0.35;
    --cm-activeline-bg: rgba(0, 0, 0, 0.30);
    --cm-selected-bg: rgba(150, 195, 237, 0.15); /* #96c3ed / 25% */
    --cm-atom: var(--color-green);
    --cm-comment: #68727e;
    --cm-def: #efc371;
    --cm-default: #cfd0d2;
    --cm-keyword: #96c3ed;
    --cm-number: var(--cm-atom);
    --cm-operator: #8c99a7;
    --cm-property: var(--color-primary);
    --cm-string: #f5eea2;
    --cm-string-2: #cdabff;
    --cm-error: #ff0000;
    --cm-cursor: var(--color-font-primary);
    --cm-matchingbracket: var(--cm-atom);
    --cm-nonmatchingbracket: var(--cm-error);
}


*,
*:before,
*:after  {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    background-color: var(--color-main-bg);
    color: var(--color-font-secondary);
    font: 400 11px/16px var(--font-family-primary);
    margin: 0;
    -webkit-font-smoothing: antialiased;
}

#wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.top-bar {
    align-items: center;
    display: flex;
    padding: 7px 16px;
}

.title {
    flex: 100%;
}

.title span:not(#version) {
    color: var(--color-font-primary);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: -0.50px;
}

.icon {
    cursor: pointer;
    height: 18px;
    width: 18px;
}

#info {
    margin-left: 24px;
    margin-right: 24px;
}

svg {
    fill: var(--color-font-secondary);
    height: 100%;
    transition: fill var(--transition);
    width: auto;
}

.icon:hover svg {
    fill: var(--color-font-primary);
}

body:not(.disabled) #toggle svg {
    fill: var(--color-green);
}

.disabled #toggle svg {}

.bottom-bar {
    align-items: center;
    display: flex;
    justify-content: flex-end;
    padding: 2px 16px;
}

#message {
    margin-right: auto;
}

.disabled-message {
    display: none;
    margin-right: auto;
}

.disabled .disabled-message {
    display: block;
}

.disabled #message {
    display: none;
}

button {
    background-color: transparent;
    border: none;
    border-radius: 3px;
    color: var(--color-font-primary);
    font-weight: 700;
    margin: 0;
    padding: 7.5px 0;
    text-transform: uppercase;
}

button:hover {
    text-decoration: underline;
}

button:not([disabled]) {
    cursor: pointer;
}

button[disabled] {
    opacity: var(--disabled-opacity);
}

#save {
    color: var(--color-primary);
    margin-left: 24px;
    padding-right: 0px;
}

.editor {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.CodeMirror {
    background-color: var(--color-main-bg);
    color: #cfd0d2;
    font: 400 12px/1.4em var(--font-family-editor);
    height: 100%;
}

.CodeMirror-gutters {
    background-color: var(--color-main-bg);
    border-right: 0px;
}

.CodeMirror-activeline-background,
.CodeMirror-activeline-gutter {
    background-color: var(--cm-activeline-bg);
}

.CodeMirror-linenumber {
    color: var(--color-font-primary);
    font-size: 11px;
    opacity: 0.25;
}

.CodeMirror-activeline .CodeMirror-linenumber {
    opacity: 0.50;
}

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

.CodeMirror-hints {
    background-color: rgba(27, 29, 32, 0.95);
    border-color: rgb(27, 29, 32); /* #1b1d20 */
    font-family: var(--font-family-editor);
    font-size: 11px;
}

.CodeMirror-hint {
    color: var(--color-font-secondary);
}

li.CodeMirror-hint-active {
    background-color: var(--color-primary);
    color: var(--color-font-primary);
}

.cm-s-default .CodeMirror-selected {
    background-color: var(--cm-selected-bg);
}

div.CodeMirror span.CodeMirror-matchingbracket {
    color: var(--cm-default);
    border-bottom: 2px solid var(--cm-matchingbracket);
}

div.CodeMirror span.CodeMirror-nonmatchingbracket {
    color: var(--cm-nonmatchingbracket);
}

.CodeMirror .CodeMirror-placeholder,
.cm-s-default .cm-comment {
    color: var(--cm-comment);
}

.cm-s-default .cm-keyword {
    color: var(--cm-keyword);
}

.cm-s-default .cm-def {
    color: var(--cm-def);
}

.cm-s-default .cm-variable,
.cm-s-default .cm-variable-2 {
    color: inherit;
}

.cm-s-default .cm-operator {
    color: var(--cm-operator);
}

.cm-s-default .cm-property {
    color: var(--cm-property);
}

.cm-s-default .cm-string {
    color: var(--cm-string);
}

.cm-s-default .cm-string-2 {
    color: var(--cm-string-2);
}

.cm-s-default .cm-number {
    color: var(--cm-number);
}

.cm-s-default .cm-atom {
    color: var(--cm-atom);
}

.cm-s-default .cm-error {
    border-bottom: 2px solid var(--cm-error);
    color: var(--cm-default);
}