/* Dark theme */
.theme-dark {
  --text-gray: rgba(255, 255, 255, 0.6);
  --text-brown: rgb(147, 114, 100);
  --text-orange: rgb(255, 163, 68);
  --text-yellow: rgb(255, 220, 73);
  --text-green: rgb(77, 171, 154);
  --text-blue: rgb(82, 156, 202);
  --text-purple: rgb(154, 109, 215);
  --text-pink: rgb(226, 85, 161);
  --text-red: rgb(255, 115, 105);

  --background-gray: rgb(69, 75, 78);
  --background-brown: rgb(67, 64, 64);
  --background-orange: rgb(89, 74, 58);
  --background-yellow: rgb(89, 86, 59);
  --background-green: rgb(53, 76, 75);
  --background-blue: rgb(54, 73, 84);
  --background-purple: rgb(68, 63, 87);
  --background-pink: rgb(83, 59, 76);
  --background-red: rgb(89, 65, 65);
}

/* Light theme */
.theme-light {
  --text-gray: rgba(55, 53, 47, 0.6);
  --text-brown: rgb(100, 71, 58);
  --text-orange: rgb(217, 115, 13);
  --text-yellow: rgb(223, 171, 1);
  --text-green: rgb(15, 123, 108);
  --text-blue: rgb(11, 110, 153);
  --text-purple: rgb(105, 64, 165);
  --text-pink: rgb(173, 26, 114);
  --text-red: rgb(224, 62, 62);

  --background-gray: rgb(235, 236, 237);
  --background-brown: rgb(233, 229, 227);
  --background-orange: rgb(250, 235, 221);
  --background-yellow: rgb(251, 243, 219);
  --background-green: rgb(221, 237, 234);
  --background-blue: rgb(221, 235, 241);
  --background-purple: rgb(234, 228, 242);
  --background-pink: rgb(244, 223, 235);
  --background-red: rgb(251, 228, 228);
}

/* 6. Notion Colour Blocks */
/* Original idea from: https://gist.github.com/mklepaczewski/54e451f09994b9d450de81c8baaf8aa4 */
/* but also with simpler classes so you can use `<span class='colour'>` as well */

.app-container .markdown-preview-view pre[class*="language-note-"] {
  padding: 3px 2px;
  border-radius: 0;
}

.app-container .markdown-preview-view pre[class*="language-note-"] code[class*="language-note-"] {
  color: var(--text-normal);
  white-space: pre-wrap;
  font-family: var(--default-font);
  font-size: 1rem;
  padding: 0;
  background:none;
}

.app-container .markdown-preview-view pre.language-note-notice,
.app-container .markdown-preview-view pre.language-note-gray-background,
.app-container .markdown-preview-view pre.language-note-gray-bg,
.gray-background,
.gray-bg {
  background-color: var(--background-gray);
}

.app-container .markdown-preview-view pre.language-note-brown-background,
.app-container .markdown-preview-view pre.language-note-brown-bg,
.brown-background,
.brown-bg {
  background-color: var(--background-brown);
}

.app-container .markdown-preview-view pre.language-note-orange-background,
.app-container .markdown-preview-view pre.language-note-orange-bg,
.orange-background,
.orange-bg {
  background-color: var(--background-orange);
}

.app-container .markdown-preview-view pre.language-note-warn,
.app-container .markdown-preview-view pre.language-note-yellow-background,
.app-container .markdown-preview-view pre.language-note-yellow-bg,
.yellow-background,
.yellow-bg {
  background-color: var(--background-yellow)
}

.app-container .markdown-preview-view pre.language-note-success,
.app-container .markdown-preview-view pre.language-note-green-background,
.app-container .markdown-preview-view pre.language-note-green-bg,
.green-background,
.green-bg {
  background-color: var(--background-green);
}

.app-container .markdown-preview-view pre.language-note-info,
.app-container .markdown-preview-view pre.language-note-blue-background,
.app-container .markdown-preview-view pre.language-note-blue-bg,
.blue-background,
.blue-bg {
  background-color: var(--background-blue);
}

.app-container .markdown-preview-view pre.language-note-purple-background,
.app-container .markdown-preview-view pre.language-note-purple-bg,
.purple-background,
.purple-bg {
  background-color: var(--background-purple);
}

.app-container .markdown-preview-view pre.language-note-pink-background,
.app-container .markdown-preview-view pre.language-note-pink-bg,
.pink-background,
.pink-bg {
  background-color: var(--background-pink);
}

.app-container .markdown-preview-view pre.language-note-danger,
.app-container .markdown-preview-view pre.language-note-red-background,
.app-container .markdown-preview-view pre.language-note-red-bg,
.red-background,
.red-bg {
  background-color: var(--background-red);
}

.app-container .markdown-preview-view pre.language-note-gray,
.app-container .markdown-preview-view pre.language-note-brown,
.app-container .markdown-preview-view pre.language-note-orange,
.app-container .markdown-preview-view pre.language-note-yellow,
.app-container .markdown-preview-view pre.language-note-green,
.app-container .markdown-preview-view pre.language-note-blue,
.app-container .markdown-preview-view pre.language-note-purple,
.app-container .markdown-preview-view pre.language-note-pink,
.app-container .markdown-preview-view pre.language-note-red {
  background-color: transparent;
}

.app-container .markdown-preview-view pre.language-note-gray code.language-note-gray,
.gray {
  color: var(--text-gray);
}

.app-container .markdown-preview-view pre.language-note-brown code.language-note-brown,
.brown {
  color: var(--text-brown);
}

.app-container .markdown-preview-view pre.language-note-orange code.language-note-orange,
.orange {
  color: var(--text-orange);
}

.app-container .markdown-preview-view pre.language-note-yellow code.language-note-yellow,
.yellow {
  color: var(--text-yellow)
}

.app-container .markdown-preview-view pre.language-note-green code.language-note-green,
.green {
  color: var(--text-green);
}

.app-container .markdown-preview-view pre.language-note-blue code.language-note-blue,
.blue {
  color: var(--text-blue);
}

.app-container .markdown-preview-view pre.language-note-purple code.language-note-purple,
.purple {
  color: var(--text-purple);
}

.app-container .markdown-preview-view pre.language-note-pink code.language-note-pink,
.pink {
  color: var(--text-pink);
}

.app-container .markdown-preview-view pre.language-note-red code.language-note-red,
.red {
  color: var(--text-red);
	}