.theme-dark {
  --background-primary: #202020;
  --background-primary-alt: #1a1a1a;
  --background-secondary: #161616;
  --background-nav-alt: #1f201f;
  --background-nav: #151615;
  --golden-brown: #d6ba7c;
  --text-accent: #d6ba7c;
  --text-accent-hover: #d6ba7c;
  --text-normal: #dcddde;
  --text-muted: #888;
  --text-faint: #555;
  --text-error: #ff3333;
  --text-error-hover: #990000;
  --text-highlight-bg: #dbaa205e;
  --text-on-accent: #dcddde;
  --interactive-normal: #2a2a2a;
  --interactive-hover: #303030;
  --interactive-accent: #d6ba7c;
  --interactive-accent-hover: #d6ba7c;
  --scrollbar-active-thumb-bg: rgba(255, 255, 255, 0.2);
  --scrollbar-bg: rgba(255, 255, 255, 0.05);
  --scrollbar-thumb-bg: rgba(255, 255, 255, 0.1);
  --text-nav-selected: #000000;
  --interactive-accent-rgb: #d6ba7c;
}

.theme-light {
  --interactive-accent-rgb: #d6ba7c;
  --background-nav-alt: rgba(58, 62, 63, 255);
  --background-nav: rgba(41, 44, 46, 255);
  --background-primary: rgba(250, 250, 250);
  --golden-brown: #d6ba7c;
  --code-block-background: #ffff;
  --code-block-border: #92a1a17a;
  --interactive-accent: #d6ba7c;
  --list-color: #d6ba7c;
  --text-accent: #d6ba7c;
  --text-faint: rgba(150, 150, 150, 255);
  --text-highlight-bg: #dbaa205e;
  --text-nav-selected: rgba(255, 255, 255, 255);
  --text-nav: rgba(190, 190, 190, 255);
  --text-normal: rgba(44, 44, 44, 255);
  --text-accent-hover: #d6ba7c;
  --interactive-accent-hover: #d6ba7c;
}

.side-dock-ribbon-tab.is-active {
  background-color: var(--background-secondary);
  color: var(--golden-brown);
}

/* Top left "File explorer" text */
.side-dock-title {
  color: var(--text-nav);
}

/* Wrap long nav text */
.nav-file-title,
.nav-folder-title {
  white-space: normal;
}

/* Indent wrapped nav text */
.nav-file-title-content {
  margin-left: 10px;
  text-indent: -10px;
}

/* Horizontal rule between Icons and vault in left nav */
.nav-buttons-container {
  border-bottom: 1px solid var(--background-nav-alt);
}

/* Just above the folder tree, the name of the vault */
.nav-folder.mod-root > .nav-file-title,
.nav-folder.mod-root > .nav-folder-title {
  color: var(--text-nav);
}

/* Padding on left side of nav items so that hover doesn't butt up against ribbon */
.nav-folder.mod-root > .nav-folder-children {
  padding-left: 5px;
}

/* Color of left nav tree text */
.nav-file-title,
.nav-folder-title {
  color: var(--text-nav);
}

/* Set the left nav background to same color as ribbon so we can make a curved corner that matches */
.side-dock-panels-container {
  background-color: var(--background-nav-alt);
}

/* Set the left nav background to different color from ribbon, and give a curved corner with statusbar */
.side-dock.mod-left .side-dock-plugin-panel {
  background-color: var(--background-nav);
  border-bottom-left-radius: 10px;
}

/* Set the right nav background to different color from ribbon, and give a curved corner with statusbar */
.side-dock.mod-right .side-dock-plugin-panel {
  background-color: var(--background-nav);
  border-bottom-right-radius: 10px;
}

/* Left nav ribbon background color */
.side-dock-ribbon {
  background-color: var(--background-nav-alt);
}

/* Left nav ribbon background-color */
.side-dock-ribbon-before.is-before-active,
.side-dock-ribbon-after.is-after-active,
.side-dock-ribbon-tab.is-before-active,
.side-dock-ribbon-tab.is-after-active {
  background-color: var(--background-nav);
}

/* Left nav ribbon background-color */
.side-dock-ribbon-before.is-before-active .side-dock-ribbon-tab-inner,
.side-dock-ribbon-after.is-after-active .side-dock-ribbon-tab-inner,
.side-dock-ribbon-tab.is-before-active .side-dock-ribbon-tab-inner,
.side-dock-ribbon-tab.is-after-active .side-dock-ribbon-tab-inner {
  background-color: var(--background-nav-alt);
}

/* Left nav ribbon active background-color */
.side-dock-ribbon-tab.is-active {
  background-color: var(--background-nav);
}

/* Left nav ribbon active hover text color (icon color) */
.side-dock-ribbon-tab.is-active:hover {
  color: var(--golden-brown);
}

/* Left nav ribbon inactive hover text color (icon color) */
.side-dock-ribbon-tab:hover,
.side-dock-ribbon-action:hover {
  color: var(--golden-brown);
}

/* Background and text color of selected item in left nav tree */
.nav-file.is-active > .nav-file-title,
.nav-file.is-active > .nav-folder-title,
.nav-file.is-active > .nav-folder-collapse-indicator,
.nav-folder.is-active > .nav-file-title,
.nav-folder.is-active > .nav-folder-title,
.nav-folder.is-active > .nav-folder-collapse-indicator {
  background-color: var(--golden-brown);
  color: var(--text-nav-selected);
}

/* Background and text color of selected item in left nav tree - when hovering */
.nav-file.is-active > .nav-file-title:hover,
.nav-file.is-active > .nav-folder-title:hover,
.nav-file.is-active > .nav-folder-collapse-indicator:hover,
.nav-folder.is-active > .nav-file-title:hover,
.nav-folder.is-active > .nav-folder-title:hover,
.nav-folder.is-active > .nav-folder-collapse-indicator:hover {
  background-color: var(--golden-brown);
  color: var(--text-nav-selected);
}

/* Background and text color of hovered item in left nav tree */
body:not(.is-grabbing) .nav-file-title:hover,
body:not(.is-grabbing) .nav-folder-title:hover {
  background-color: var(--background-secondary-alt);
  color: var(--golden-brown);
}

/* Background and text color of hovered collapse indicator in left nav tree */
body:not(.is-grabbing) .nav-file-title:hover .nav-folder-collapse-indicator,
body:not(.is-grabbing) .nav-folder-title:hover .nav-folder-collapse-indicator {
  background-color: var(--background-secondary-alt);
  color: var(--text-nav-selected);
}

/* Left Nav menu item - hover background color */
body:not(.is-grabbing) .nav-file-title:hover,
body:not(.is-grabbing) .nav-folder-title:hover {
  background-color: var(--background-nav-alt);
}

/* Left Nav menu item - hover background color of the collapse/expand arrow */
body:not(.is-grabbing) .nav-file-title:hover .nav-folder-collapse-indicator,
body:not(.is-grabbing) .nav-folder-title:hover .nav-folder-collapse-indicator {
  background-color: var(--background-nav-alt);
}

/* Left side dock */
.side-dock.mod-left {
  border-right: 1px solid var(--background-secondary-border);
}

/* Font adjustments for pane headers */
.view-header-title {
  font-size: 16px;
  font-weight: 600;
}

/* Status bar ... duh? :) */
.status-bar {
  background-color: var(--background-nav-alt);
  border-top: 0px solid var(--background-nav-alt);
  color: var(--text-nav);
}

/* Context menu hover item */
.menu-item:hover {
  background-color: var(--background-secondary-alt);
  color: var(--golden-brown);
}

/* Font for the markdown source panel */
div.markdown-source-view {
  font-family: var(--font-family-editor);
}

/* Font for the markdown preview panel */
div.markdown-preview-view {
  font-family: var(--font-family-preview);
}

/* Enable wrapping of code blocks in the preview panel */
.theme-light code[class*="language-"],
.theme-light pre[class*="language-"] {
  white-space: pre-wrap;
  background-color: #ffffff;
}

/* Changing size/color of the header hashtags ## */
.cm-formatting-header {
  color: var(--text-faint);
  font-size: 0.6em;
}

/* Coloring the list bullets/numbers */
.cm-s-obsidian span.cm-formatting-list {
  color: #d6ba7c;
  font-size: 0.85em;
  font-weight: 500;
  font-family: var(--font-monospace);
}

/* Editor view - task list, color and veritcal align */
.cm-s-obsidian span.cm-formatting-task {
  color: #d6ba7c;
  font-size: 0.85em;
  font-weight: 500;
  position: relative;
  top: -0.12em;
}

/* Preview Checkboxes don't seem to align correctly */
.markdown-preview-view .task-list-item-checkbox {
  width: 15px;
  height: 15px;
  /* position: relative; */
  /* top: 3px; */
}

/* Preview code block background */
.markdown-preview-view pre {
  padding: 1em;
  background-color: var(--code-block-background);
  border-radius: 4px;
  border: 1px solid var(--code-block-border);
  white-space: pre-wrap;
}

/* Code block border color */
.cm-s-obsidian div.HyperMD-codeblock-begin-bg {
  border-top: 1px solid var(--code-block-border);
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

/* Code block border color */
.cm-s-obsidian div.HyperMD-codeblock-end-bg {
  border-bottom: 1px solid var(--code-block-border);
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

/* Code block background color */
.cm-s-obsidian div.HyperMD-codeblock-bg {
  background-color: var(--code-block-background);
}

/* Code block left and right padding */
.cm-s-obsidian pre.HyperMD-codeblock {
  padding: 0px 10px 0px 10px;
}

/* Code block top padding */
.cm-s-obsidian pre.HyperMD-codeblock-begin {
  padding-top: 10px;
}

/* Code block bottom padding */
.cm-s-obsidian pre.HyperMD-codeblock-end {
  padding-top: 10px;
}

/* Code block left and right border colors */
.cm-s-obsidian div.HyperMD-codeblock-bg {
  border-left: 1px solid var(--code-block-border);
  border-right: 1px solid var(--code-block-border);
}

/* Add a tiny bit of padding to the link brackets and parenthesis */
.cm-s-obsidian span.cm-formatting-link,
.cm-s-obsidian span.cm-formatting-link-string {
  padding: 0 1px 0 1px;
  /* font-weight: 500; */
}

/* Set background of code panes to pure white since main background is off-white */
.markdown-preview-view code {
  background-color: rgba(0, 0, 0, 0);
  bottom: 0px;
}

/* Additional left/right padding for tag pane so hover background has some room */
.tag-pane-tags {
  padding-left: 10px;
  padding-right: 5px;
}

/* Color the hover background like we do the selected left nav */
.tag-pane-tag:hover {
  background-color: var(--background-nav-alt);
  color: var(--text-nav-selected);
}

/* Style the tag pane tag count with the bear red coloring used in selected item from left nav */
.tag-pane-tag-count {
  background-color: var(--golden-brown);
  color: var(--text-nav-selected);
}

/* Backlinks title match hover */
.search-result-file-title:hover {
  background-color: var(--background-nav-alt);
}

/* Backlinks content match hover */
.search-result-file-match:hover {
  background-color: var(--background-nav-alt);
}

/* Backlink titles for matches */
.search-result-file-title {
  color: var(--text-nav);
}

/* Backlink highlighted [[links]] */
.search-result-file-matched-text {
  color: var(--text-nav-selected);
  background-color: var(--golden-brown);
  padding: 2px;
  border-radius: 4px;
}

/* Check for update button */
button.mod-cta {
    color: var(--interactive-normal);
    background-color: (--interactive-accent)
}

/* Notice when fetching community themes */
div.notice {
    color: var(--interactive-normal) !important;
    background-color: (--interactive-accent)
}