/* Attribute: #appTheme=catppuccin-coal */ 
/* https://gist.joshuabell.xyz/ringofstorms/8f1e3afba1b34be6a8d8a78265765f6c */
/* Adapted from https://github.com/catppuccin/trilium-notes/blob/main/themes/mocha/catppuccin-mocha-yellow.css */
:root {
  --rosewater: #f5e0dc;
  --flamingo: #f2cdcd;
  --pink: #f5c2e7;
  --mauve: #cba6f7;
  --red: #f38ba8;
  --maroon: #eba0ac;
  --peach: #fab387;
  --yellow: #f9e2af;
  --orange: #ffb875;
  --green: #a6e3a1;
  --teal: #94e2d5;
  --sky: #89dceb;
  --sapphire: #74c7ec;
  --blue: #89b4fa;
  --lavender: #b4befe;
  --text: #e0e0e0;
  --subtext1: #cccccc;
  --subtext0: #b8b8b8;
  --overlay2: #a3a3a3;
  --overlay1: #8c8c8c;
  --overlay0: #787878;
  --surface2: #636363;
  --surface1: #4f4f4f;
  --surface0: #3b3b3b;
  --base: #262626;
  --mantle: #1f1f1f;
  --crust: #171717;
  --accent: var(--orange);
}

:root {
  --theme-style: dark;
  --mermaid-theme: dark;

  --main-font-family: "Arial";
  --main-font-size: normal;

  --tree-font-family: "Arial";
  --tree-font-size: normal;

  --detail-font-family: "Arial";
  --detail-font-size: normal;

  --monospace-font-family: "Monospace";
  --monospace-font-size: normal;

  --main-background-color: var(--crust);
  --main-text-color: var(--text);
  --main-border-color: var(--text);

  --accented-background-color: var(--mantle);
  --more-accented-background-color: var(--surface0);

  --button-text-color: var(--text);
  --button-background-color: var(--mantle);
  --button-disabled-text-color: var(--overlay2);
  --button-disabled-background-color: var(--crust);
  --button-border-color: var(--base);
  --button-border-radius: 2px;

  --primary-button-background-color: var(--overlay1);
  --primary-button-text-color: var(--text);
  --primary-button-border-color: var(--overlay1);

  --muted-text-color: var(--overlay2);

  --input-text-color: var(--text);
  --input-background-color: var(--crust);

  --hover-item-text-color: var(--text);
  --hover-item-background-color: var(--surface0);

  --active-item-text-color: var(--text);
  --active-item-background-color: var(--surface0);
  --active-item-border-color: transparent;

  --menu-text-color: var(--text);
  --menu-background-color: var(--surface0);

  --modal-background-color: var(--crust);
  --modal-backdrop-color: var(--surface1);

  --left-pane-background-color: var(--mantle);
  --left-pane-text-color: var(--text);

  --launcher-pane-background-color: var(--mantle);
  --launcher-pane-text-color: var(--text);

  --active-tab-background-color: var(--crust);
  --active-tab-text-color: var(--text);
  --active-tab-hover-background-color: var(--accent);

  --inactive-tab-background-color: var(--mantle);
  --inactive-tab-text-color: var(--text);
  --inactive-tab-hover-background-color: var(--surface1);

  --scrollbar-border-color: var(--accent);
  --tooltip-background-color: var(--base);
  --link-color: var(--sapphire);
}

/* CANVAS NOTE */
.excalidraw.theme--dark {
  --theme-filter: none !important;
  --island-bg-color: var(--mantle) !important;
  --button-hover-bg: var(--surface1) !important;
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-border-color) !important;
}

span.fancytree-custom-icon {
  color: var(--scrollbar-border-color);
  background: none;
}

span.fancytree-node:hover {
  border: 0px !important;
  background-color: var(--hover-item-background-color) !important;
}

span.fancytree-active {
  background-color: var(--active-tab-background-color) !important;
}

body .global-menu-button:hover {
  background-color: transparent !important;
}

.form-control:focus {
  box-shadow: 0px 0px transparent;
}

.tab-row-widget .note-tab[active]:hover .note-tab-wrapper {
  color: var(--active-tab-background-color) !important;
}

button.bx-history,
.bx-dots-vertical-rounded,
.bx-dock-right,
.bx-edit-alt,
.floating-button,
.bx-x {
  background-color: transparent !important;
}

/* CODEMIRROR */
div#root-widget
  div#rest-pane
  div#center-pane
  div.note-detail
  div.note-detail-code
  div.note-detail-code-editor
  div.CodeMirror-code
  span {
  font-family: var(--monospace-font-family);
}
div.CodeMirror span.cm-atom {
  color: var(--peach);
}
div.CodeMirror span.cm-builtin {
  color: var(--lavender);
}
div.CodeMirror span.cm-callee {
  color: var(--sky) !important;
}
div.CodeMirror span.cm-comment {
  color: var(--overlay1);
  padding: 5px 2px;
  margin: -5px -2px;
}
div.CodeMirror span.cm-def {
  color: var(--yellow);
}
div.CodeMirror span.cm-keyword {
  color: var(--mauve);
}
div.CodeMirror span.cm-matchhighlight {
  color: var(--base) !important;
  background-color: var(--mauve) !important;
}
div.CodeMirror span.cm-number {
  color: var(--maroon);
}
div.CodeMirror span.cm-operator {
  color: var(--mauve);
}
div.CodeMirror span.cm-overlay {
  color: var(--base);
}
div.CodeMirror span.cm-property {
  color: var(--blue);
}
div.CodeMirror span.cm-variable {
  color: var(--yellow);
}
div.CodeMirror span.cm-variable-2 {
  color: var(--text);
}
div.CodeMirror span.cm-variable-3,
div.CodeMirror span.cm-meta {
  color: var(--mauve);
}
div.CodeMirror span.cm-qualifier {
  color: var(--yellow);
}
div.CodeMirror span.cm-string {
  color: var(--green);
}
div.CodeMirror span.cm-string-2 {
  color: var(--teal);
}
div.CodeMirror span.cm-tag {
  color: var(--red);
}
div.CodeMirror-lines {
  color: var(--flamingo);
}
div.CodeMirror-cursor {
  filter: invert(100%);
}

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

.ck-find-result_selected {
  color: var(--crust) !important;
  background-color: var(--maroon);
}

.ck-find-result {
  color: var(--crust) !important;
  background-color: var(--yellow);
}

.note-detail-code-editor div.CodeMirror-selected,
.note-detail-code-editor div.CodeMirror-line::selection {
  background-color: var(--surface0);
}

.CodeMirror-matchingbracket {
  text-decoration: none;
  color: var(--mauve) !important;
  border: 1px solid var(--sapphire);
}

.CodeMirror-linenumber {
  color: var(--lavender);
  font-family: var(--monospace-font-family) !important;
}

/* codeblocks */
.ck-content pre {
  background: var(--base);
  border: 1px solid var(--surface2);
}

.ck-editor__editable pre[data-language]:after {
  background: transparent !important;
  color: transparent !important;
}