:root {
  --sn-stylekit-theme-type: "dark";
  --sn-stylekit-theme-name: "sn-vscode-theme";
  --sn-stylekit-base-font-size: 14px;

  --sn-stylekit-monospace-font: "Noto Sans Mono", "DejaVu Sans Mono", monospace;
  --sn-stylekit-sans-serif-font: "Cantarell", "Noto Sans", "DejaVu Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",  "Fira Sans", "Droid Sans", "Helvetica Neue", var(--sn-stylekit-simplified-chinese-font), sans-serif;
  
  --background-1: #252525;
  --background-2: #1e1e1e;
  --foreground-color: #D4D4D4;
  // --border-color: #3d3e3d;
  --border-color: var(--background-1);
  --highlight-color: #0b4a73;
  --highlight-contrast: #083c5a;

  --selected-note: #333;

  --comment-color: #6a9955;
  --attribute-color: #ce9178;
  --builtin-color: #c586c0;
  --keyword-color: #569cd6;
  --variable-2-code: #dcdcaa;
  --def-color: #9cdcfe;
  --string-color: #ce9178;
  --number-color: #b5cea8;
  --pink: #c586c0;

  --list-1: #d7c9b9;
  --list-2: #d0e0ab;
  --list-3: #abe0d3;
  --list-4: #abc2e0;
  --list-5: #b5abe0;
  --list-5: #e0abdb;
  --list-5: #e0abab;

  --selected: rgba(123, 167, 138, .99);  // fix too dark selection by chrome
  --selected-dark: #314136;

  --field-color: #3c3c3c;
  --contrast-background-color-alt: #2a2a2a;

  --sn-stylekit-menu-border: 1px solid var(--field-color);

  --sn-stylekit-info-color: #7ba78a;
  --sn-stylekit-info-contrast-color: #25412f;

  --sn-stylekit-neutral-color: #bea18a;
  --sn-stylekit-neutral-contrast-color: #e7ddd2;

  --sn-stylekit-list-item-highlight-color: --sn-stylekit-neutral-color;

  --sn-stylekit-success-color: #6ab785;
  --sn-stylekit-success-contrast-color: #25412f;

  --sn-stylekit-warning-color: #ddbc8a;
  --sn-stylekit-warning-contrast-color: #504432;

  --sn-stylekit-danger-color: #e6507f;
  --sn-stylekit-danger-contrast-color: #3a1420;

  --sn-stylekit-shadow-color: var(--background-2);

  --sn-stylekit-background-color: var(--background-1);
  --sn-stylekit-foreground-color: var(--foreground-color);
  --sn-stylekit-border-color: var(--border-color);

  --sn-stylekit-paragraph-text-color: var(--foreground-color);

  --sn-stylekit-contrast-background-color: var(--background-2);
  --sn-stylekit-contrast-foreground-color: var(--foreground-color);
  --sn-stylekit-contrast-border-color: var(--border-color);

  --sn-stylekit-secondary-background-color: var(--background-1);
  --sn-stylekit-secondary-foreground-color: var(--foreground-color);
  --sn-stylekit-secondary-border-color: var(--border-color);

  --sn-stylekit-secondary-contrast-background-color: var(--background-2);
  --sn-stylekit-secondary-contrast-foreground-color: var(--foreground-color);
  --sn-stylekit-secondary-contrast-border-color: var(--border-color);

  --sn-stylekit-editor-background-color: var(--background-2);
  --sn-stylekit-editor-foreground-color: var(--sn-stylekit-foreground-color);

  --sn-stylekit-scrollbar-track-border-color: var(--border-color);
  --sn-stylekit-scrollbar-thumb-color: var(--field-color);

  --sn-desktop-titlebar-bg-color: var(--background-1);
  --sn-desktop-titlebar-border-color: var(--border-color);
  --sn-desktop-titlebar-ui-color: var(--foreground-color);
  --sn-desktop-titlebar-ui-hover-color: var(--highlight-color);

  --sn-desktop-titlebar-icon-font-size: 13px;
}

.sn-button{
  &+.sn-button{
    margin-left: 1em;
  }
}

.CodeMirror{
  pre.CodeMirror-line,
  pre.CodeMirror-line-like{
    font-family: var(--sn-stylekit-monospace-font);
    line-height: 1.33;
  }

  .cm-formatting{
    &.cm-formatting-list,
    &.cm-formatting-list-ul{
      &.cm-variable-2{
        color: var(--list-1);
      }
    }
  }

  .cm-tab{
    & + .cm-variable-2{
      color: var(--list-1);
    }
    & + .cm-tab + .cm-variable-2{
      color: var(--list-2);
    }
    & + .cm-tab + .cm-tab + .cm-variable-2{
      color: var(--list-3);
    }
    & + .cm-tab + .cm-tab + .cm-tab + .cm-variable-2{
      color: var(--list-4);
    }
    & + .cm-tab + .cm-tab + .cm-tab + .cm-tab + .cm-variable-2{
      color: var(--list-5);
    }
    & + .cm-tab + .cm-tab + .cm-tab + .cm-tab + .cm-tab + .cm-variable-2{
      color: var(--list-6);
    }
  }

  .cm-formatting-header,
  .cm-formatting-strong,
  .cm-formatting-em{
    color: var(--sn-stylekit-warning-color);
  }

  .cm-header{
    color: var(--sn-stylekit-neutral-color);
    line-height: 1.5em;
  }

  // code editor
  &.cm-s-default{
    .cm-comment{
      color: var(--comment-color);
    }

    .cm-attribute{
      color: var(--attribute-color);
    }

    .cm-builtin{
      color: var(--builtin-color);
    }

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

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

    .cm-variable-2{
      color: var(--variable-2-code) !important;
    }

    .cm-variable{
      color: var(--def-color) !important;
    }

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

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

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

  .editor-preview{
    line-height: 1.33;
    
    ol,
    ul{
      li{
        margin-bottom: 0.5em;

        > ul{
          margin: 0.5em auto 0.75em auto;
        }
      }
    }
  }
}

@media screen and (min-width: 526px){
  .EasyMDEContainer .CodeMirror-fullscreen{
    max-width: 1000px;
    margin: 0 auto;
  }
}

#notes-column .note.selected, .notes .note.selected {
  background-color: var(--selected-note);
  color: var(--sn-stylekit-contrast-foreground-color);
}

.sn-component .sk-button.info, .sn-component .info.sk-box, .sn-component .sk-box.info, .sn-component .sk-circle.info{
  background-color: var(--sn-stylekit-foreground-color);
}

#notes-column .note progress[value]::-webkit-progress-value, .notes .note progress[value]::-webkit-progress-value{
  background-color: var(--selected-dark);
}
#notes-column .note.selected progress[value]::-webkit-progress-value, .notes .note.selected progress[value]::-webkit-progress-value{
  background-color: var(--sn-stylekit-info-color);
}

#editor,
.redactor-box.redactor-styles-on .redactor-toolbar,
.CodeMirror,
.editor-content, #editor-content,
#plus-editor .note-editor.fullscreen,
#plus-editor .note-editor,
#plus-editor .panel-default > .panel-heading,
#plus-editor .note-editor.note-frame.fullscreen .note-editable, #plus-editor .note-editor.note-frame.fullscreen .panel-body{
  background-color: var(--background-2);
}

.editor-toolbar button,
.sn-component .sk-button.sk-secondary-contrast, .sn-component .sk-secondary-contrast.sk-box, .sn-component .sk-box.sk-secondary-contrast, .sn-component .sk-circle.sk-secondary-contrast,
.sn-component .sk-button.sk-secondary-contrast:before, .sn-component .sk-secondary-contrast.sk-box:before, .sn-component .sk-box.sk-secondary-contrast:before, .sn-component .sk-circle.sk-secondary-contrast:before,
.sn-component .sk-button.contrast, .sn-component .contrast.sk-box, .sn-component .sk-box.contrast, .sn-component .sk-circle.contrast,
.sn-component .sk-button.contrast:before, .sn-component .contrast.sk-box:before, .sn-component .sk-box.contrast:before, .sn-component .sk-circle.contrast:before{
  color: var(--foreground-color);
}
.editor-toolbar button,
.editor-toolbar button i{
  color: var(--foreground-color) !important;
}

.sn-component.tags,
.sn-component.tags #tags-content{
  background-color: var(--contrast-background-color-alt);
}

#footer-bar{
  border-top: none;
}

#notes-column .filter-section .filter-bar, .notes .filter-section .filter-bar,
.tags .tag:hover:not(.selected), .tags .tag.selected,
.sn-component .sk-menu-panel .sk-menu-panel-row:hover,
.sn-component .sk-button.sk-secondary-contrast, .sn-component .sk-secondary-contrast.sk-box, .sn-component .sk-box.sk-secondary-contrast, .sn-component .sk-circle.sk-secondary-contrast,
.sn-component .sk-button.sk-secondary-contrast:before, .sn-component .sk-secondary-contrast.sk-box:before, .sn-component .sk-box.sk-secondary-contrast:before, .sn-component .sk-circle.sk-secondary-contrast:before,
.sn-component .sk-button.contrast, .sn-component .contrast.sk-box, .sn-component .sk-box.contrast, .sn-component .sk-circle.contrast,
.sn-component .sk-button.contrast:before, .sn-component .contrast.sk-box:before, .sn-component .sk-box.contrast:before, .sn-component .sk-circle.contrast:before,
.create-task-input,
.task .checkmark{
  background-color: var(--field-color);
}

#editor-title-bar > .title > .input{
  color: var(--foreground-color);
}
#editor-title-bar > .title > .input:focus,
input:focus,
textarea:focus,
.task textarea.task-input-textarea:focus,
.task .checkbox-container input:focus+.checkmark{
  background-color: var(--field-color);
}
#editor-title-bar > .title > .input::selection,
input::selection, textarea::selection,
*::selection{
  background: var(--selected) !important;
  color: var(--background-2) !important;
}

.redactor-modal button.redactor-button-unstyled{
  color: var(--sn-stylekit-contrast-foreground-color) !important;
}

.redactor-modal button.redactor-button-danger{
  color: var(--sn-stylekit-danger-color) !important;
  background-color: var(--sn-stylekit-danger-contrast-color) !important;
}

.task{
  margin-bottom: 15px;

  .checkmark{
    height: 30px;
    width: 30px;
    margin: 0;
    top: 0;
    border: none;

    &:after{
      left: 9px;
      top: 1px;
      width: 10px;
      height: 20px;
      border-width: 0 2px 2px 0;
    }
  }
  
  .checkbox-container{
    width: 45px;
    padding: 0;
    margin: 0;
  }

  textarea.task-input-textarea{
    height: 30px !important;
    padding: 0 6px;
    line-height: 30px;
  }
}
.task-section a{
  font-size: 12px;
}
#completed-tasks{
  margin-bottom: 10px;
}
.create-task-input{
  padding: 0 6px;
  width: calc(100% - 12px);
}