/* Define all colors in root */
:root
{
  --highlight-lcolor: #FFDE5C;
  --highlight-dcolor: #B29B40;

  --highlight-lblue: #7fedff;
  --highlight-dblue: #58a5b2;
  
  --highlight-lred: #f0a6a6;
  --highlight-dred: #c08484;

  --bold-in-lightmode: hsl(209deg, 100%, 50%);
  --bold-in-darkmode: hsl(202deg, 43%, 57%);

  --italic-in-lightmode: #0BAD00;
  --italic-in-darkmode: #0DD000;

  --search-match-hl: rgba(11, 255, 0, 0.48);

  --highlight-l-link: #fb9971;
  --highlight-d-link: #FA804E;

  --highlight-lgreen: #8eec66;
  --highlight-ldgreen: #8eec66;

  --signature: "αὐτοτελής" /* "❖"*/ 
}


/* Choose the wanted color (defined in root) to theme-light, adding a common name to dark/light theme and using the 'var()' function */

.theme-light {  
  --highlight-yellow: var(--highlight-lcolor);
  --highlight-blue: var(--highlight-lblue);
  --highlight-red: var(--highlight-lred);
  --highlight-green: var(--highlight-lgreen);
  --highlight-link: var(--highlight-l-link);

}

/* Choose the wanted color (defined in root) to theme-dark, adding a common name to dark/light theme and using the 'var()' function */

.theme-dark {
  --highlight-yellow: var(--highlight-dcolor);
  --highlight-blue: var(--highlight-dblue);
  --highlight-red: var(--highlight-dred);
  --highlight-green: var(--highlight-dgreen);
  --highlight-link: var(--highlight-d-link);


}
/* Make FONT BLACK in BLOCKQUOTE in DARK MODE that is highlighted, since it defaults to white even though Red Highlight below it's defined as black, but that doesn't cover blockquotes, apparently */

    /* Yellow */
.cm-s-obsidian span.cm-highlight.cm-quote {
    font-style: initial;	
    color: #222 !important;
}
	/* Blue */
span.cm-strong.cm-highlight.cm-quote {
    font-style: initial;	
    color: #222 !important;
}
    /* Red */
span.cm-em.cm-highlight.cm-quote {
    /* font-style: initial;	*/
    color: #222 !important;
}

/* Link */
span.cm-highlight.cm-hmd-internal-link.cm-quote {
    font-style: initial;	
    color: #222 !important;
}

/* Apply the background color to the element/class using 'var()' function and the common name chosen for both themes */

/* Yelow Highlight */

body > .app-container div.markdown-preview-view mark, .cm-s-obsidian span.cm-highlight {
    background-color: var(--highlight-yellow);
     color: #222;
}

/* Blue Highlight */

span.cm-strong.cm-highlight {
    font-style: initial;	
    background-color: var(--highlight-blue);
    color: #222;
}

body > .app-container div.markdown-preview-view strong > mark {
	font-style: initial !important;
	background-color: var(--highlight-blue);
	color: #222;
}

/* Red Highlight */


span.cm-em.cm-highlight {
    font-style: unset !important; 
    background-color: var(--highlight-red);
    color: #222;
}

body > .app-container div.markdown-preview-view em > mark {
	/*font-style: initial !important; */
	background-color: var(--highlight-red);
	color: #222;
}


 /* Green Highlight */
/* span.cm-em.cm-strong.cm-highlight {
    font-style: initial;	
    background-color: var(--highlight-green);
    color: #222;
}

body > .app-container div.markdown-preview-view em > strong > mark {
	font-style: initial !important;
	background-color: var(--highlight-green);
	color: #222;
}
*/
/*
span.cm-strong.cm-em.cm-highlight, .markdown-preview-view mark > strong > em {
    font-weight: 500;
    font-style: inherit;
    text-rendering: initial;
    text-shadow: none;
    background-color: var(--highlight-green);
}*/
/* Link Highlight */

span.cm-highlight.cm-hmd-internal-link {
  /*  font-style: initial; */	
    background-color: var(--highlight-link);
    color: #222 !important;
}

body > .app-container div.markdown-preview-view mark > .internal-link {
     background-color: var(--highlight-link);
     color: #222 !important;
}



/* Then, Obsidian will choose the color according to the theme: if dark use the color defined in "--highlight-dred", if light the color defined in "--highlight-lred". */


/* Text selection color */
.theme-dark
{ --selection-color: #90482a;

}

.theme-light
{ --selection-color: #F07847;

}

.theme-light .cm-strong,
.theme-light .markdown-preview-view strong {
	color: var(--bold-in-lightmode);
}

.vertical-tab-nav-item:last-child {
	color: var(--bold-in-lightmode);
}

/* Bold coloring in light mode */
.theme-light .cm-strong,
.theme-light .markdown-preview-view strong {
	color: var(--bold-in-lightmode);
}

.vertical-tab-nav-item:last-child {
	color: var(--bold-in-lightmode);
}

/* Added thing, so bold is also blue in block quote */
.theme-light .cm-quote.cm-strong,
.theme-light .markdown-preview-view strong {
	color: var(--bold-in-lightmode);
}


/* Bold coloring in dark mode - "commented" since Shimmering Focus does this. I include this here in case I switch themes or something and want to keep this function. Months later: Shimmering Focus doesn't do this anymore, so it's good I kept it :) */
.theme-dark .cm-strong,
.theme-dark .markdown-preview-view strong {
	color: var(--bold-in-darkmode);
}

.vertical-tab-nav-item:last-child {
	color: var(--bold-in-darkmode);
}

/* Added thing, so bold is also blue in block quote */
.theme-dark .cm-quote.cm-strong,
.theme-dark .markdown-preview-view strong {
	color: var(--bold-in-darkmode);
}

/* ITALICS COLORING, made by me 2022-02-24 :) */

/* light mode */
/*
.theme-light .cm-em,
.theme-light .markdown-preview-view em {
	color: var(--italic-in-lightmode);
}

.vertical-tab-nav-item:last-child {
	color: var(--italic-in-lightmode);
}

/* dark mode */
/*
.theme-dark .cm-em,
.theme-dark .markdown-preview-view em {
	color: var(--italic-in-darkmode);
}

.vertical-tab-nav-item:last-child {
	color: var(--italic-in-darkmode);
}

*/