/*───────────────────────────────────────────────────────
Royal Velvet
Version 0.11.0
Created by @caro401
Readme:
https://github.com/caro401/royal-velvet
----------------------------------------------------------------
MIT License

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
────────────────────────────────────────────────────── */

/* @settings

name: Royal Velvet
id: royal-velvet
settings:
  -
    id: inline-document-title-color
    title: Inline Document Title Color
    description: Change the color of the inline document title to match another heading or a custom hue.
    type: class-select
    allowEmpty: false
    default: doc-title-h1
    options:
      -
        label: Disabled
        value: doc-title-disable
      -
        label: Accent Color (hue)
        value: doc-title-accent
      -
        label: Rainbow
        value: doc-title-rainbow
      -
        label: Heading 1
        value: doc-title-h1
      -
        label: Heading 2
        value: doc-title-h2
      -
        label: Heading 3
        value: doc-title-h3
      -
        label: Heading 4
        value: doc-title-h4
      -
        label: Heading 5
        value: doc-title-h5
      -
        label: Heading 6
        value: doc-title-h6
*/

/*Fonts*/

@import url("https://fonts.googleapis.com/css2?family=Fira+Code&family=Fira+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap");

:root {
  --default-font: "Fira Sans", "Inter", sans-serif; /*Note and Settings Text*/
  --font-monospace: "Fira Code", "Source Code Pro", monospace; /*Code block text*/
}

body {
  --font-monospace-theme: "Fira Code", "Source Code Pro", monospace; /*Code block text*/
}

/*Dark Theme Variables*/
.theme-dark {
  --layer-0: hsl(var(--layer-hue-sat), 9%);
  --layer-1: hsl(var(--layer-hue-sat), 13%);
  --layer-2: hsl(var(--layer-hue-sat), 15%);
  --layer-3: hsl(var(--layer-hue-sat), 19%);
  --layer-4: hsl(var(--layer-hue-sat), 30%);
  --on-layer-tuple: 60, 30%, 96%;

  --red-hue: 10;
  --orange-hue: 35;
  --yellow-hue: 60;
  --green-hue: 115;
  --blue-hue: 170;
  --purple-hue: 250;
  --purple-pink-hue: 285;
  --pink-hue: 330;

  --primary-sat: 100%;
  --secondary-sat: 100%;

  --primary-lit: 75.1%;
  --secondary-lit: 90%;

}
/*Light Theme Variables*/
.theme-light {
  --layer-0: hsl(var(--layer-hue-sat), 89%);
  --layer-1: hsl(var(--layer-hue-sat), 99%);
  --layer-2: hsl(var(--layer-hue-sat), 96%);
  --layer-3: hsl(var(--layer-hue-sat), 83%);
  --layer-4: hsl(var(--layer-hue-sat), 80%);
  --on-layer-tuple: 234, 14%, 15%;

  --red-hue: 0;
  --orange-hue: 30;
  --yellow-hue: 40;
  --green-hue: 105;
  --blue-hue: 200;
  --purple-hue: 300;
  --purple-pink-hue: 310;
  --pink-hue: 330;

  --primary-sat: 100%;
  --secondary-sat: 80%;

  --primary-lit: 43%;
  --secondary-lit: 50%;
}

/*Common Variables*/
.theme-dark,
.theme-light {
  --layer-hue-sat: 235, 15%;

  --on-layer: hsl(var(--on-layer-tuple));
  --on-layer-600: hsla(var(--on-layer-tuple), 0.6);
  --on-layer-400: hsla(var(--on-layer-tuple), 0.4);

  /* red */
  --red-tuple: var(--red-hue), var(--primary-sat), var(--primary-lit);
  --red: hsl(var(--red-tuple));
  --red-900: hsla(var(--red-tuple), 0.9);

  --red-secondary-tuple: var(--red-hue), var(--secondary-sat), var(--secondary-lit);

  /* orange */
  --orange-tuple: var(--orange-hue), var(--primary-sat), var(--primary-lit);
  --orange: hsl(var(--orange-tuple));
  --orange-100: hsla(var(--orange-tuple), 0.1);

  --orange-secondary-tuple: var(--orange-hue), var(--secondary-sat), var(--secondary-lit);
  --orangeSecondary: hsl(var(--orange-secondary-tuple));

  /* yellow */
  --yellow-tuple: var(--yellow-hue), var(--primary-sat), var(--primary-lit);
  --yellow: hsl(var(--yellow-tuple));
  --yellow-100: hsla(var(--yellow-tuple), 0.1);
  --yellow-700: hsla(var(--yellow-tuple), 0.7);

  --yellow-secondary-tuple: var(--yellow-hue), var(--secondary-sat), var(--secondary-lit);

  /* green */
  --green-tuple: var(--green-hue), var(--primary-sat), var(--primary-lit);
  --green: hsl(var(--green-tuple));
  --green-200: hsla(var(--green-tuple), 0.2);

  --green-secondary-tuple: var(--green-hue), var(--secondary-sat), var(--secondary-lit);
  --greenSecondary: hsl(var(--green-secondary-tuple));

  /* blue */
  --blue-tuple: var(--blue-hue), var(--primary-sat), var(--primary-lit);
  --blue: hsl(var(--blue-tuple));
  --blue-600: hsla(var(--blue-tuple), 0.6);

  --blue-secondary-tuple: var(--blue-hue), var(--secondary-sat), var(--secondary-lit);

  /* purple */
  --purple-tuple: var(--purple-hue), var(--primary-sat), var(--primary-lit);
  --purple: hsl(var(--purple-tuple));
  --purple-200: hsla(var(--purple-tuple), 0.2);

  --purple-secondary-tuple: var(--purple-hue), var(--secondary-sat), var(--secondary-lit);

  /* purple-pink */
  --purple-pink-tuple: var(--purple-pink-hue), var(--primary-sat), var(--primary-lit);
  --purple-pink: hsl(var(--purple-pink-tuple));

  --purple-pink-secondary-tuple: var(--purple-pink-hue), var(--secondary-sat), var(--secondary-lit);

  /* pink */
  --pink-tuple: var(--pink-hue), var(--primary-sat), var(--primary-lit);
  --pink: hsl(var(--pink-tuple));
  --pink-100: hsla(var(--pink-tuple), 0.1);
  --pink-300: hsla(var(--pink-tuple), 0.3);
  --pink-400: hsla(var(--pink-tuple), 0.4);

  --pink-secondary-tuple: var(--pink-hue), var(--secondary-sat), var(--secondary-lit);
  --pinkSecondary: hsl(var(--pink-secondary-tuple));

  --gradientDegree: 135deg;

  --background-modifier-cover: var(--layer-0); /*Obsidian Title Bar Bg*/
  --background-primary: var(--layer-2); /*Note background*/
  --background-primary-alt: var(--layer-1); /*Note Title background active*/
  --background-secondary: var(--layer-1); /*Sidebar background*/
  --background-secondary-alt: var(--layer-0); /*Sidebar Title background*/

  --background-modifier-border: var(--layer-1); /*Border outline of quotes, tables, line breaks*/
  --background-modifier-form-field: var(--pink-100);
  --background-modifier-form-field-highlighted: var(--pink-300);
  --background-modifier-box-shadow: var(--layer-3);
  --background-modifier-success: var(--green-200);
  --background-modifier-error: var(--red-900);
  --background-modifier-error-rgb: 61, 0, 0;
  --background-modifier-error-hover: var(--red);

  --text-normal: var(--on-layer); /*Text body of note*/
  --text-muted: var(
    --on-layer-600
  ); /*Text darker for sidebar, toggles, inactive, tags, etc*/
  --text-accent: var(--pink); /*Links*/
  --text-accent-hover: var(--pinkSecondary); /*Links hover*/
  --text-faint: var(--on-layer-600); /*Link brackets color & Gutter Numbers*/
  --text-error: var(--red);
  --text-error-hover: var(--redSecondary);

  --text-highlight-bg: var(--yellow-100); /*Search Matches*/
  --text-highlight-bg-active: var(--orange-100); /*Active Search Match (Preview Mode)*/
  --text-selection: var(--purple-200); /*Text Selections*/

  /* other custom vars */
  --indentation-guide-opacity: 10%;

  /* --Obsidian Variables-- */
  --interactive-normal: var(--layer-1); /*Button Color*/
  --interactive-hover: var(--layer-0); /*Button Hovered Color*/
  --interactive-accent: var(--pink); /*Workspace Note Title Underline*/
  --interactive-accent-hover: var(--orange); /*Menu Button Hover*/
  --interactive-success: var(--green);

  --scrollbar-bg: var(--layer-2); /*Scrollbar Gutter Background*/
  --scrollbar-thumb-bg: var(--pink-100); /*Scrollbar Color*/
  --scrollbar-active-thumb-bg: var(--pink-300); /*Scrollbar Dragged Color*/
  --indentation-guide: var(--layer-4);

  --blockquote-border: var(--red);
  --link-color: var(--orange); /* internal link */
  --link-color-hover: var(--orangeSecondary);
  --link-unresolved-color: var(--yellow-700);
  --link-unresolved-hover: var(--yellow);
  --link-external-color: var(--green);
  --link-external-color-hover: var(--greenSecondary);
  --table-header-color: var(--layer-2);
  --text-on-accent: var(--layer-2);

  --background-modifier-border-hover: transparent;
  --modal-border-color: transparent;
  --prompt-border-color: transparent;
  --background-modifier-border-focus: transparent; /* border around active input boxes */
  --background-modifier-border: transparent; /* separator lines in eg. setting menu */
  --input-shadow: none;
  --blockquote-border-color: none;
  --ribbon-background: var(--background-secondary-alt);
  --ribbon-background-collapsed: var(--background-secondary-alt);
  --code-normal: var(--purple-pink);
  --code-size: 100%;

  --hr-color: var(--orange); /* Horizontal Line */
}

/*Setting Dropdown*/
.theme-dark .dropdown {
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22292.4%22%20height=%22292.4%22%3E%3Cpath%20d=%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%20fill=%22hsl(60,%2030%25,%2096.1%25)%22/%3E%3C/svg%3E");
}
.theme-light .dropdown {
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22292.4%22%20height=%22292.4%22%3E%3Cpath%20d=%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%20fill=%22hsl(234,%2014%25,%2015%25)%22/%3E%3C/svg%3E");
}
.dropdown {
  font-family: var(--default-font);
}

.menu-item-icon {
  color: var(--green);
}

/*--File Explorer--*/
.nav-folder-title-content {
  -webkit-text-fill-color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  background-image: linear-gradient(
    var(--gradientDegree),
    var(--pink) 0,
    var(--orange) 100%
  );
  font-weight: 700;
}

.collapse-icon:hover {
  color: var(--pink);
}

.nav-file-title.is-active {
  background-color: var(--yellow-100);
  color: var(--yellow);
  font-weight: bolder;
}

.nav-file-title:hover,
.nav-folder-title:hover {
  background-color: var(--yellow-100);
  color: var(--yellow);
}

.nav-folder-title:hover .nav-folder-collapse-indicator {
  color: var(--pink);
}
.nav-file-title {
  line-height: 100%;
}

/*Status Bar*/
.status-bar {
  background-color: var(--layer-0);
  border-top: unset;
  padding-top: 4px;
  max-height: 28px;
}

/*--Workspace: Notes--*/
/*Note Title Bar*/
.workspace-leaf .view-header {
  border-bottom: 5px solid var(--layer-2);
}

.view-header-title {
  color: var(--pinkSecondary);
}

.workspace-split.mod-root
  > .workspace-leaf:first-of-type:last-of-type
  .view-header,
.view-header {
  border-bottom: 5px solid var(--layer-2);
}
/*Active Note Titlebar*/
/*Note Title Bar: Text*/
.workspace-leaf.mod-active .view-header-title {
  color: var(--pink);
}

/*--Emphasis--*/
strong,
.cm-s-obsidian .cm-strong,
.cm-s-obsidian .cm-quote.cm-strong {
  color: var(--pink);
}

em,
.cm-s-obsidian .cm-em,
.cm-s-obsidian .cm-quote.cm-em {
  color: var(--blue);
}

.cm-em.cm-strong,
strong > em {
  color: var(--red);
}

/*Highlight*/
.markdown-preview-view mark,
.cm-s-obsidian .cm-highlight,
.cm-s-obsidian .cm-highlight.cm-quote,
.cm-s-obsidian .cm-formatting-highlight {
  color: var(--yellow);
  font-weight: 500;
}

.cm-strikethrough,
del {
  color: var(--on-layer-400);
}

/*--Headers/Headings--*/
body:not(.doc-title-disable) .inline-title {
  -webkit-text-fill-color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
}

body.doc-title-accent .inline-title {
  background-image: linear-gradient(
    var(--gradientDegree),
    hsl(calc(var(--accent-h) + 30), var(--primary-sat), var(--primary-lit)) 0,
    hsl(calc(var(--accent-h) - 30), var(--primary-sat), var(--primary-lit)) 100%
  );
}

body.doc-title-rainbow .inline-title {
  background-image: linear-gradient(
    var(--gradientDegree),
    var(--pink) 0,
    var(--orange) 8.33%,
    var(--yellow) 16.66%,
    var(--green) 25%,
    var(--blue) 33.33%,
    var(--purple) 41.66%,
    var(--pink) 50%,
    var(--orange) 58.33%,
    var(--yellow) 66.66%,
    var(--green) 75%,
    var(--blue) 83.33%,
    var(--purple) 91.66%,
    var(--pink) 100%
  );
}

h1,
.cm-header-1,
body.doc-title-h1 .inline-title,
body:not([class*="doc-title"]) .inline-title {
  -webkit-text-fill-color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  background-image: linear-gradient(
    var(--gradientDegree),
    var(--pink) 0,
    var(--orange) 100%
  );
} /*Source Mode*/

h2,
.cm-header-2,
body.doc-title-h2 .inline-title {
  -webkit-text-fill-color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  background-image: linear-gradient(
    var(--gradientDegree),
    var(--orange) 0,
    var(--yellow) 100%
  );
} /*Source Mode*/

h3,
.cm-header-3,
body.doc-title-h3 .inline-title {
  -webkit-text-fill-color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  background-image: linear-gradient(
    var(--gradientDegree),
    var(--yellow) 0,
    var(--green) 100%
  );
} /*Source Mode*/

h4,
.cm-header-4,
body.doc-title-h4 .inline-title {
  -webkit-text-fill-color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  background-image: linear-gradient(
    var(--gradientDegree),
    var(--green) 0,
    var(--blue) 100%
  );
} /*Source Mode*/

h5,
.cm-header-5,
body.doc-title-h5 .inline-title {
  -webkit-text-fill-color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  background-image: linear-gradient(
    var(--gradientDegree),
    var(--blue) 0,
    var(--purple) 100%
  );
} /*Source Mode*/

h6,
.cm-header-6,
body.doc-title-h6 .inline-title {
  -webkit-text-fill-color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  background-image: linear-gradient(
    var(--gradientDegree),
    var(--purple) 0,
    var(--pink) 100%
  );
} /*Source Mode*/

/*--Code--*/
/* *italicized inline code* */
span.cm-em.cm-inline-code,
.markdown-preview-view em > code {
  color: var(--blue);
}

/* **bold inline code** */
span.cm-inline-code.cm-strong,
.markdown-preview-view strong > code {
  color: var(--pink);
}

/* ***bold italicized inline code*** */
.cm-em.cm-inline-code.cm-strong,
.markdown-preview-view strong > em > code {
  color: var(--red);
}

/* ==highlight inline code== */
span.cm-inline-code.cm-highlight,
.markdown-preview-view mark > code {
  color: var(--yellow);
  /* background-color: transparent; */
}

/* ~~strikethrough inline code~~ */
span.cm-inline-code.cm-strikethrough,
.markdown-preview-view del > code {
  color: var(--text-muted);
}

.markdown-preview-view pre,
.cm-s-obsidian .HyperMD-codeblock {
  padding-left: 2ch;
}

.code-block-flair,
.markdown-source-view.mod-cm6 .code-block-flair {
  color: var(--orange);
  padding-top: 1ch;
}

/* code block and indented code in editing mode */
.markdown-source-view.mod-cm6 .cm-line.HyperMD-codeblock,
.markdown-rendered pre code,
.cm-s-obsidian span.cm-inline-code.cm-hmd-indented-code {
  color: var(--text-muted);
  font-size: var(--font-smaller);
}

/*--inline code in headings--*/
.markdown-preview-view h1 code,
.markdown-preview-view h2 code,
.markdown-preview-view h3 code,
.markdown-preview-view h4 code,
.markdown-preview-view h5 code,
.markdown-preview-view h6 code {
  background-color: unset;
}

/*--Links--*/
.cm-s-obsidian span.cm-hmd-internal-link,
.cm-s-obsidian span.cm-quote.cm-hmd-internal-link,
.cm-hmd-internal-link,
.cm-hmd-internal-link .cm-underline,
a.internal-link {
  /* color: var(--link-color); */
  -webkit-text-fill-color: var(--link-color);
}

:is(
    .cm-s-obsidian span.cm-hmd-internal-link,
    .cm-hmd-internal-link .cm-underline,
    .cm-hmd-internal-link,
    a.internal-link
  ):hover {
  /* color: var(--link-color-hover); */
  /* text-decoration-line   : none !important; */
  -webkit-text-fill-color: var(--link-color-hover);
}

.is-unresolved,
span.is-unresolved > span.cm-hmd-internal-link,
.markdown-source-view.mod-cm6 .is-unresolved,
.markdown-source-view.mod-cm6 .is-unresolved .cm-underline,
.markdown-preview-view .internal-link.is-unresolved,
span.is-unresolved,
a.internal-link.is-unresolved {
  /* opacity: 1; */
  color: var(--link-unresolved-color);
  -webkit-text-fill-color: var(--link-unresolved-color);
  text-decoration-color: var(--link-unresolved-color);
}

:is(
    .is-unresolved,
    span.is-unresolved > span.cm-hmd-internal-link,
    .markdown-source-view.mod-cm6 .is-unresolved,
    .markdown-preview-view .internal-link.is-unresolved,
    .markdown-rendered .internal-link.is-unresolved,
    span.is-unresolved,
    a.internal-link.is-unresolved
  ):hover {
  text-decoration-color: var(--link-unresolved-hover);
  color: var(--link-unresolved-hover);
  -webkit-text-fill-color: var(--link-unresolved-hover);
}

a.external-link,
.cm-link,
.cm-link .cm-underline,
.cm-s-obsidian span.cm-link,
.cm-s-obsidian span.cm-link.cm-quote,
.cm-s-obsidian span.cm-url {
  -webkit-text-fill-color: var(--link-external-color);
  /* removes the link icon to the right */
  background: transparent;
}

/* link icon padding */
.cm-s-obsidian .external-link,
a.external-link {
  background-image: none;
  padding-right: 0px;
}

/* ? */
.cm-s-obsidian span.cm-url {
  text-decoration: unset;
}

/* :is(<items>):hover */
:is(
    .cm-link,
    .cm-link .cm-underline,
    .external-link,
    .cm-s-obsidian span.cm-link,
    .cm-s-obsidian span.cm-url
  ):hover {
  -webkit-text-fill-color: var(--link-external-color-hover);
}

/*--Blockquotes--*/
blockquote,
.markdown-preview-view blockquote {
  border: 0 solid;
  border-left-width: var(--size-4-1);
  border-radius: var(--radius-s);
  border-left-color: var(--blockquote-border); /* ? use different color?*/
  background-color: var(--layer-1);
  padding: 10px 20px;
  margin-inline-start: 30px;
  margin-inline-end: 30px;
}

/* Just left border with no rounding in live preview
 because there's no parent element for the whole quote */
.markdown-source-view.mod-cm6.is-live-preview .HyperMD-quote {
  background-color: var(--layer-1);
  padding: 10px 20px;
  margin-inline-start: 30px;
  margin-inline-end: 30px;
}

.markdown-source-view.mod-cm6.is-live-preview .HyperMD-quote:before,
.markdown-source-view.mod-cm6 .cm-blockquote-border:before {
  border-left: var(--size-4-1) solid var(--blockquote-border);
}

.cm-s-obsidian span.cm-quote {
  color: var(--text-normal);
}

cite {
  width: 100%;
  text-align: right;
  display: block;
  color: var(--yellow);
}

/*--Tables--*/
table {
  outline: var(--size-4-1) solid var(--layer-1);
  outline-offset: -2px; /* should be -4px but otherwise th background color clips somehow */
  margin-left: auto;
  margin-right: auto;
  border-radius: 4px;
}

thead {
  background-image: linear-gradient(
    var(--gradientDegree),
    var(--purple) 0,
    var(--pink) 100%
  );
}

/* Dataview Plugin table head */
thead.table-view-thead {
  background-image: linear-gradient(
    var(--gradientDegree),
    var(--blue) 0,
    var(--purple) 100%
  );
}

thead .dataview.small-text {
  color: var(--table-header-color);
}

/* striped table rows */
.markdown-rendered tbody tr:nth-child(odd),
.markdown-rendered tbody tr:nth-child(odd):hover {
  background-color: var(--layer-1);
}

.markdown-rendered tbody tr:nth-child(even),
.markdown-rendered tbody tr:nth-child(even):hover {
  background-color: var(--layer-2);
}

.markdown-preview-view th,
.markdown-preview-view td {
  border: unset;
}

/* Table Head Row */
.markdown-rendered th {
  text-align: center;
  font-weight: 700;
  font-size: 1em;
  padding: var(--size-2-3) var(--size-4-2);
  border: none;
}

.markdown-rendered th[align="left"] {
  text-align: left;
}

/* Table Head Row Dataview Plugin */
.table-view-table > thead > tr > th {
  font-size: 1em;
}

/* Table Head Row when editing table contents */
.markdown-source-view.cm-s-obsidian.mod-cm6
  .HyperMD-table-row.HyperMD-table-row-0.cm-line {
  color: var(--text-normal);
}

/*--Tags--*/
a.tag,
.cm-s-obsidian span.cm-hashtag {
  color: var(--pink);
}

/*--Frontmatter/Metadata/Yaml--*/
.frontmatter-container,
.cm-s-obsidian .cm-hmd-frontmatter {
  font-size: small;
  line-height: 100%;
}

.frontmatter-container .tag {
  border-color: var(--pink);
}

.frontmatter-container .tag:hover {
  border-color: var(--pinkSecondary);
}

/*--Footnotes--*/
section.footnotes > hr {
  border-color: var(--text-muted);
}

section.footnotes li,
.cm-s-obsidian .HyperMD-footnote {
  color: var(--text-muted);
  font-size: smaller;
}

.footnote-backref {
  color: var(--pink-400);
}

/*--Graph--*/

.graph-view.color-fill-tag {
  color: var(--orange);
}

.graph-view.color-fill-attachment {
  color: var(--green);
}

.graph-view.color-arrow,
.graph-view.color-line {
  color: var(--layer-4);
}

.graph-view.color-text {
  color: var(--on-layer);
}

.graph-view.color-circle {
  color: var(--blue);
}

.graph-view.color-fill-focused {
  color: var(--purple);
}

/* Other */

input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="number"] {
  /* border: 1px solid var(--pink-400); */
  background-color: var(--layer-0);
}

input[type="range"] {
  background-color: var(--text-faint);
}

/* Slider in settings menu; doesn't work on mobile */
input[type="range"]::-webkit-slider-thumb {
  background: var(--pink);
}
input[type="range"]::-webkit-slider-thumb:hover,
input[type="range"]::-webkit-slider-thumb:active {
  background: var(--pinkSecondary);
}

.workspace-leaf-resize-handle:hover {
  background-color: var(--layer-4);
}

/* image */
img,
.markdown-source-view.mod-cm6 .cm-content > img {
  margin: 1ch;
  display: block;
  margin-left: auto;
  margin-right: auto;
  border-radius: var(--radius-s);
}

/* Don't put margin around icon folder emoji icons */
div.obsidian-icon-folder-icon > img {
  margin: 0;
}

button.mod-cta,
button.mod-muted,
button.mod-warning {
  font-family: var(--default-font);
}

/* Code highlighting theme */

.token.keyword,
.cm-keyword,
.cm-builtin,
.token.operator,
.cm-operator {
  color: var(--pink);
}

.token.atrule,
.token.attr-value,
.token.function,
.cm-attribute,
.cm-type,
.cm-def,
.cm-variable {
  color: var(--green);
}

.token.parameter {
  color: var(--orange);
}

.token.class-name {
  color: var(--purple);
}

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

/* Nested bullets are different colours */
ul li::marker,
ol li::marker,
.HyperMD-list-line-1 .list-bullet::after,
.HyperMD-list-line.HyperMD-list-line-1 .cm-formatting-list {
  color: var(--pink);
}
ul ul li::marker,
ol ol li::marker,
.HyperMD-list-line-2 .list-bullet::after,
.HyperMD-list-line.HyperMD-list-line-2 .cm-formatting-list {
  color: var(--orange);
}
ul ul ul li::marker,
ol ol ol li::marker,
.HyperMD-list-line-3 .list-bullet::after,
.HyperMD-list-line.HyperMD-list-line-3 .cm-formatting-list {
  color: var(--yellow);
}
ul ul ul ul li::marker,
ol ol ol ol li::marker,
.HyperMD-list-line-4 .list-bullet::after,
.HyperMD-list-line.HyperMD-list-line-4 .cm-formatting-list {
  color: var(--green);
}
ul ul ul ul ul li::marker,
ol ol ol ol ol li::marker,
.HyperMD-list-line-5 .list-bullet::after,
.HyperMD-list-line.HyperMD-list-line-5 .cm-formatting-list {
  color: var(--blue);
}
ul ul ul ul ul ul li::marker,
ol ol ol ol ol ol li::marker,
.HyperMD-list-line-6 .list-bullet::after,
.HyperMD-list-line.HyperMD-list-line-6 .cm-formatting-list {
  color: var(--purple);
}

/* 7th level and higher: grey */
ul ul ul ul ul ul ul li::marker,
ol ol ol ol ol ol ol li::marker,
.HyperMD-list-line-7 .list-bullet::after,
.HyperMD-list-line.HyperMD-list-line-7 .cm-formatting-list {
  color: var(--list-marker-color);
}

/* 1.0.0 nested list color variation fix */
.HyperMD-list-line-1 .list-bullet::after,
.has-list-bullet .list-bullet:after {
  background-color: var(--pink);
}

.HyperMD-list-line-2 .list-bullet::after,
.has-list-bullet .has-list-bullet .list-bullet::after {
  background-color: var(--orange);
}

.HyperMD-list-line-3 .list-bullet::after,
.has-list-bullet .has-list-bullet .has-list-bullet .list-bullet::after {
  background-color: var(--yellow);
}

.HyperMD-list-line-4 .list-bullet::after,
.has-list-bullet
  .has-list-bullet
  .has-list-bullet
  .has-list-bullet
  .list-bullet::after {
  background-color: var(--green);
}

.HyperMD-list-line-5 .list-bullet::after,
.has-list-bullet
  .has-list-bullet
  .has-list-bullet
  .has-list-bullet
  .has-list-bullet
  .list-bullet::after {
  background-color: var(--blue);
}

.HyperMD-list-line-6 .list-bullet::after,
.has-list-bullet
  .has-list-bullet
  .has-list-bullet
  .has-list-bullet
  .has-list-bullet
  .has-list-bullet
  .list-bullet::after {
  background-color: var(--purple);
}

/* 7th level and higher: grey */
.has-list-bullet
  .has-list-bullet
  .has-list-bullet
  .has-list-bullet
  .has-list-bullet
  .has-list-bullet
  .has-list-bullet
  .list-bullet::after {
  background-color: var(--list-marker-color);
}

/*--Coloured Checkboxes--*/
ul input[type="checkbox"],
.HyperMD-list-line-1 input[type="checkbox"] {
  border-color: var(--pink);
}
.HyperMD-list-line-1 input[type="checkbox"][data-task="x"],
.has-list-bullet.contains-task-list .task-list-item-checkbox:checked {
  background-color: var(--pink);
  border-color: var(--pink);
}

ul ul input[type="checkbox"],
.HyperMD-list-line-2 input[type="checkbox"] {
  border-color: var(--orange);
}
.HyperMD-list-line-2 input[type="checkbox"][data-task="x"],
.has-list-bullet
  .has-list-bullet.contains-task-list
  .task-list-item-checkbox:checked {
  background-color: var(--orange);
  border-color: var(--orange);
}

ul ul ul input[type="checkbox"],
.HyperMD-list-line-3 input[type="checkbox"] {
  border-color: var(--yellow);
}
.HyperMD-list-line-3 input[type="checkbox"][data-task="x"],
.has-list-bullet
  .has-list-bullet
  .has-list-bullet.contains-task-list
  .task-list-item-checkbox:checked {
  background-color: var(--yellow);
  border-color: var(--yellow);
}

ul ul ul ul input[type="checkbox"],
.HyperMD-list-line-4 input[type="checkbox"] {
  border-color: var(--green);
}
.HyperMD-list-line-4 input[type="checkbox"][data-task="x"],
.has-list-bullet
  .has-list-bullet
  .has-list-bullet
  .has-list-bullet.contains-task-list
  .task-list-item-checkbox:checked {
  background-color: var(--green);
  border-color: var(--green);
}

ul ul ul ul ul input[type="checkbox"],
.HyperMD-list-line-5 input[type="checkbox"] {
  border-color: var(--blue);
}
.HyperMD-list-line-5 input[type="checkbox"][data-task="x"],
.has-list-bullet
  .has-list-bullet
  .has-list-bullet
  .has-list-bullet
  .has-list-bullet.contains-task-list
  .task-list-item-checkbox:checked {
  background-color: var(--blue);
  border-color: var(--blue);
}

ul ul ul ul ul ul input[type="checkbox"],
.HyperMD-list-line-6 input[type="checkbox"] {
  border-color: var(--purple);
}
.HyperMD-list-line-6 input[type="checkbox"][data-task="x"],
.has-list-bullet
  .has-list-bullet
  .has-list-bullet
  .has-list-bullet
  .has-list-bullet
  .has-list-bullet.contains-task-list
  .task-list-item-checkbox:checked {
  background-color: var(--purple);
  border-color: var(--purple);
}

ul ul ul ul ul ul ul input[type="checkbox"] {
  border-color: var(--checkbox-border-color);
}
.has-list-bullet
  .has-list-bullet
  .has-list-bullet
  .has-list-bullet
  .has-list-bullet
  .has-list-bullet
  .has-list-bullet.contains-task-list
  .task-list-item-checkbox:checked {
  background-color: var(--checkbox-color);
  border-color: var(--checkbox-color);
}

/* indentation guides */
.markdown-source-view.mod-cm6 .cm-indent:nth-child(6n + 1):before,
.markdown-rendered.show-indentation-guide li ul::before,
.markdown-rendered.show-indentation-guide li ol::before {
  border-color: var(--pink);
  opacity: var(--indentation-guide-opacity);
}

.markdown-source-view.mod-cm6 .cm-indent:nth-child(6n + 2):before,
.markdown-rendered.show-indentation-guide li li ul::before,
.markdown-rendered.show-indentation-guide li li ol::before {
  border-color: var(--orange);
  opacity: var(--indentation-guide-opacity);
}

.markdown-source-view.mod-cm6 .cm-indent:nth-child(6n + 3):before,
.markdown-rendered.show-indentation-guide li li li ul::before,
.markdown-rendered.show-indentation-guide li li li ol::before {
  border-color: var(--yellow);
  opacity: var(--indentation-guide-opacity);
}

.markdown-source-view.mod-cm6 .cm-indent:nth-child(6n + 4):before,
.markdown-rendered.show-indentation-guide li li li li ul::before,
.markdown-rendered.show-indentation-guide li li li li ol::before {
  border-color: var(--green);
  opacity: var(--indentation-guide-opacity);
}

.markdown-source-view.mod-cm6 .cm-indent:nth-child(6n + 5):before,
.markdown-rendered.show-indentation-guide li li li li li ul::before,
.markdown-rendered.show-indentation-guide li li li li li ol::before {
  border-color: var(--blue);
  opacity: var(--indentation-guide-opacity);
}

.markdown-source-view.mod-cm6 .cm-indent:nth-child(6n + 6):before,
.markdown-rendered.show-indentation-guide li li li li li li ul::before,
.markdown-rendered.show-indentation-guide li li li li li li ol::before {
  border-color: var(--purple);
  opacity: var(--indentation-guide-opacity);
}

.markdown-rendered.show-indentation-guide li li li li li li li ul::before,
.markdown-rendered.show-indentation-guide li li li li li li li ol::before {
  border-color: var(--list-marker-color);
  opacity: var(--indentation-guide-opacity);
}

.markdown-source-view.mod-cm6 .cm-indent.cm-active-indent::before {
  opacity: 75%;
}

/* Search Suggestions Highlight */
.suggestion-highlight,
.search-result-file-matched-text {
  color: var(--pink);
  /* or purple? */
}

/*
[BUG] Characters disappearing in headings #17
why? - this occurs in legacy editor with spell check enabled, if words in headings are marked by spell checker
what causes this? - .CodeMirror.cm-spell-error setting red a squiggly line as background-image, thus overwriting the color gradient and making the letters disappear
*/

.CodeMirror .cm-spell-error {
  background-image: unset;
  text-decoration: underline;
  text-decoration-color: red;
}

.cm-header-1.cm-spell-error {
  background-image: linear-gradient(
    var(--gradientDegree),
    var(--pink) 0,
    var(--orange) 100%
  );
}
.cm-header-2.cm-spell-error {
  background-image: linear-gradient(
    var(--gradientDegree),
    var(--orange) 0,
    var(--yellow) 100%
  );
}
.cm-header-3.cm-spell-error {
  background-image: linear-gradient(
    var(--gradientDegree),
    var(--yellow) 0,
    var(--green) 100%
  );
}
.cm-header-4.cm-spell-error {
  background-image: linear-gradient(
    var(--gradientDegree),
    var(--green) 0,
    var(--blue) 100%
  );
}
.cm-header-5.cm-spell-error {
  background-image: linear-gradient(
    var(--gradientDegree),
    var(--blue) 0,
    var(--purple) 100%
  );
}
.cm-header-6.cm-spell-error {
  background-image: linear-gradient(
    var(--gradientDegree),
    var(--purple) 0,
    var(--pink) 100%
  );
}

/* Tab Title */
.is-focused
  .mod-active
  .workspace-tab-header.is-active
  .workspace-tab-header-inner-icon,
.is-focused
  .mod-active
  .workspace-tab-header.is-active
  .workspace-tab-header-inner-title,
.is-focused .workspace-leaf.mod-active .view-header-title {
  font-weight: 700;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  background-image: linear-gradient(
    var(--gradientDegree),
    var(--pink) 0,
    var(--orange) 100%
  );
}

/* Tab Title Bar */
/* editing */
.is-focused .workspace-leaf.mod-active .view-header-title {
  color: var(--tab-text-color-focused-active);
}

/* not editing */
.view-header-title,
/* tabbed out */
.workspace-leaf.mod-active .view-header-title {
  color: var(--text-faint);
}

/* border that extends into titlebar */
.workspace-leaf-resize-handle {
  border-color: transparent;
}

/* disabled menu "checkbox" background */
.checkbox-container:not(.is-enabled) {
  background-color: var(--layer-1);
}

/* disabled menu "checkbox" */
.checkbox-container:not(.is-enabled):hover {
  background-color: var(--layer-0);
}

.MJX-TEX {
  font-size: 130%;
}

/* math block */
.math.math-block.cm-embed-block,
.markdown-preview-view .math.math-block mjx-container.MathJax {
  background-color: var(--layer-1);
  border-radius: var(--radius-s);
  border-left: var(--radius-s) solid var(--purple);
  border-right: var(--radius-s) solid var(--pink);
}

/* math block preview mode */
.markdown-preview-view .math.math-block mjx-container mjx-math.MJX-TEX {
  padding-top: var(--size-4-4);
  padding-bottom: var(--size-4-4);
}

/* some heading in settings menu */
.setting-item-heading .setting-item-name,
.vertical-tab-header-group-title {
  text-transform: uppercase;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  background-image: linear-gradient(
    var(--gradientDegree),
    var(--pink) 0,
    var(--orange) 100%
  );
}

/* ">" on blockquote in editing mode */
.cm-formatting-quote {
  color: var(--text-muted);
}

/* foreground color of titlebar close button */
.titlebar-button.mod-close:hover {
  color: var(--layer-2);
}

/* active line number in editing mode */
.markdown-source-view.mod-cm6 .cm-gutterElement.cm-active {
  color: var(--blue);
}
