: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;
    --editor-activeline-bg: rgba(0, 0, 0, 0.30);
    --editor-selected-bg: rgba(150, 195, 237, 0.15); /* #96c3ed / 25% */
    --editor-atom: var(--color-green);
    --editor-comment: #68727e;
    --editor-def: #efc371;
    --editor-default: #cfd0d2;
    --editor-keyword: #96c3ed;
    --editor-number: var(--editor-atom);
    --editor-operator: #8c99a7;
    --editor-property: var(--color-primary);
    --editor-string: #f5eea2;
    --editor-string-2: #cdabff;
    --editor-error: #ff0000;
    --editor-cursor: var(--color-font-primary);
    --editor-matchingbracket: var(--editor-atom);
    --editor-nonmatchingbracket: var(--editor-error);
}

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

html {
    height: 100vh;
    overflow: hidden;
}

body {
    background-color: var(--color-main-bg);
    color: var(--color-font-secondary);
    display: flex;
    flex-direction: column;
    font: 400 11px/16px var(--font-family-primary);
    height: 100%;
    margin: 0;
    max-height: 100%;
    -webkit-font-smoothing: antialiased;
}

/* prevent overscroll */
body {
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
}

header {
    align-items: center;
    display: flex;
    padding: 7px 16px;
    -webkit-user-select: none;
}

.title {
    flex: 1;
}

.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);
}

main {
    display: flex;
    flex: 1;
    flex-direction: column;
}

footer {
    align-items: center;
    display: flex;
    justify-content: flex-end;
    padding: 2px 16px;
    -webkit-user-select: none;
}

#status {
    margin-right: auto;
}

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

button:hover {
    text-decoration: underline;
}

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

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

.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(--editor-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(--editor-cursor);
}

.CodeMirror-hints {
    background-color: rgba(27, 29, 32, 0.95);
    border-color: rgb(27, 29, 32);
    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(--editor-selected-bg);
}

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

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

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

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

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

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

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

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

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

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

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

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

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