/* ───────────────────────────────────────────────── */
/** Tags
──────────────────────────────────────────────────── */

/* FIX https://discord.com/channels/686053708261228577/989603365606531104/1015645516341719120 */
.cm-hashtag:not(.cm-formatting):hover {
	color: var(--tag-color-hover);
	text-decoration: var(--tag-decoration-hover);
}

/* ───────────────────────────────────────────────── */
/** Bold & Italic
──────────────────────────────────────────────────── */

.uncolored-bold :is(strong, .cm-strong) {
	--bold-color: var(--text-normal);
}

.uncolored-italic :is(em, .cm-em) {
	--italic-color: var(--text-normal);
}

/* ───────────────────────────────────────────────── */
/** Tasks (Checkboxes)
──────────────────────────────────────────────────── */
/* most styling in form of changed --checkbox variables */

input[type="checkbox"] {
	border-width: 1.5px;
}

input[type="checkbox"]:checked:hover,
input[type="checkbox"]:checked {
	border: 1px solid var(--text-gray);
}

.contains-task-list.contains-task-list {
	--list-indent: 1.6em;
}

body .cm-s-obsidian span.cm-formatting-task {
	color: var(--text-gray);
}

/* ───────────────────────────────────────────────── */
/** Links
──────────────────────────────────────────────────── */
/* link styling also done in section for color scheme variables
and changed Obsidian variables */

u,
.cm-underline,
.internal-link,
.external-link,
.cm-url,
.cm-link-alias {
	text-decoration-skip-ink: none;
	text-underline-offset: 2px;
}

.cm-hmd-internal-link .cm-underline.cm-underline,
.markdown-preview-view .internal-link:not(.multi-select-pill, .metadata-link-inner) {
	text-decoration: underline double 1.2px;
}

body .cm-string.cm-url {
	color: var(--text-gray);
}

/* don't underline the formatting */
.cm-s-obsidian .cm-url.cm-formatting,
body:not(.show-urls) .cm-line:not(.cm-active) .cm-string.cm-url,
.cm-link-alias-pipe.cm-link-alias-pipe.cm-link-alias-pipe.cm-link-alias-pipe.cm-link-alias-pipe,
.cm-formatting-link.cm-formatting-link.cm-formatting-link {
	color: var(--text-faint);
	text-decoration: none;
	cursor: default;
}

/* FIX link color on hover for in some cases not applied correctly */
.markdown-source-view.mod-cm6 :is(.cm-link-alias, .cm-hmd-internal-link) .cm-underline:hover {
	color: var(--link-external-color-hover);
}

/* ───────────────────────────────────────────────── */
/** Fold external URLs (Source Mode)
──────────────────────────────────────────────────── */
body:not(.show-urls) .cm-s-obsidian:not(.is-live-preview)
	.cm-line:not(.cm-active)
	.cm-string.cm-url:not(.cm-formatting) {
	font-size: 0;
	letter-spacing: 0;
	/* letter spacing causes some gaps even with font-size 0 */
}

body:not(.show-urls)
	.cm-s-obsidian:not(.is-live-preview)
	.cm-line:not(.cm-active)
	.cm-string.cm-url:not(.cm-formatting)::after {
	position: relative;
	top: 2px;
	font-family: var(--icon-font);
	font-size: calc(var(--font-text-size) * 0.9);
	content: "link";
}

/* so quickly scrolling through a list of links does not expand the URLs */
body:not(.show-urls) .cm-s-obsidian:not(.is-live-preview)
	.cm-line.cm-active
	.cm-string.cm-url:not(.cm-formatting)::after,
body:not(.show-urls)
	.cm-s-obsidian:not(.is-live-preview)
	.cm-line.cm-active
	.cm-string.cm-url:not(.cm-formatting) {
	transition-delay: var(--transition-delay-passing-over-protection);
}

/* remove external link icon */
.external-link {
	padding-right: 0;
	background-image: none;
}

/* ───────────────────────────────────────────────── */
/** Code
──────────────────────────────────────────────────── */
/* styling of code in general */

.markdown-preview-view.markdown-preview-view :is(pre, code),
.cm-s-obsidian .HyperMD-codeblock,
.cm-inline-code {
	--codeblock-border: var(--thin-muted-border);
	--codeblock-roundness: var(--radius-s);
	--code-block-alt-bg: var(--bg5);
	--slight-code-roundish: var(--radius-xs);
}

/* ───────────────────────────────────────────────── */
/** Inline Code
──────────────────────────────────────────────────── */

/* "*:not(pre) > code" targets inline code
(i.e. code that is not in a pre (= block) ) */
.is-live-preview code,
body .markdown-preview-view *:not(pre) > code,
.cm-inline-code.cm-inline-code.cm-inline-code.cm-inline-code.cm-inline-code.cm-inline-code {
	color: var(--inline-code-color);
	background-color: var(--bg2);
	/* more distinduishable from background */
}

.is-live-preview code,
.markdown-preview-view *:not(pre) > code {
	border-radius: var(--slight-code-roundish);
}

.is-live-preview code,
.markdown-source-view .cm-line .cm-inline-code:not(.cm-formatting-code),
.markdown-preview-view *:not(pre) > code {
	background-color: var(--bg2);
}

/* interaction with blockquotes */
.markdown-preview-view blockquote > *:not(pre) > code,
.cm-quote.cm-inline-code.cm-inline-code.cm-inline-code.cm-inline-code.cm-inline-code {
	background-color: var(--bg3);
}

.cm-inline-code {
	padding: 1px 0;
	background-color: var(--bg2);
	border-radius: var(--slight-code-roundish);
}

/* inline code surrounded by backticks */
.cm-formatting-code + .cm-inline-code:not(.cm-formatting-code) {
	border-radius: 0;
}

/* opening backtick */
.cm-formatting-code.cm-formatting-code {
	border-radius: var(--slight-code-roundish) 0 0 var(--slight-code-roundish);
}

/* closing backtick */
.cm-inline-code:not(.cm-formatting-code) + .cm-formatting-code {
	border-radius: 0 var(--slight-code-roundish) var(--slight-code-roundish) 0;
}

/* live preview */
.is-live-preview .cm-active .cm-inline-code:not(.cm-formatting-code) {
	border-radius: 0;
}

/* ───────────────────────────────────────────────── */
/** Code Blocks
──────────────────────────────────────────────────── */
/* Code blocks in Edit Mode */
:is(.HyperMD-codeblock-end, .HyperMD-codeblock-begin) .cm-formatting-code-block {
	color: var(--text-muted);
}

.cm-s-obsidian .HyperMD-codeblock {
	line-height: 1.4em;
}

body .markdown-source-view.mod-cm6 .cm-line.HyperMD-codeblock {
	padding-left: 4px;
}

.cm-s-obsidian div.HyperMD-codeblock-begin-bg {
	background-color: var(--code-block-alt-bg);
	border: var(--codeblock-border);
	border-bottom: none;
	border-top-left-radius: var(--codeblock-roundness);
	border-top-right-radius: var(--codeblock-roundness);
}

.cm-s-obsidian div.HyperMD-codeblock-end-bg {
	border-bottom: var(--codeblock-border);
	border-bottom-right-radius: var(--codeblock-roundness);
	border-bottom-left-radius: var(--codeblock-roundness);
}

div.HyperMD-codeblock-bg:not(.HyperMD-codeblock-begin-bg) {
	border-right: var(--codeblock-border);
	border-left: var(--codeblock-border);
}

/* Code blocks in Live Preview */
.cm-line.HyperMD-codeblock .code-block-flair {
	top: unset;
	padding: 0 1px;
	color: var(--text-muted);
}

.copy-code-button.copy-code-button.copy-code-button {
	top: unset;
	bottom: 0;
	padding: 0 4px;
	background-color: var(--interactive-normal);

	&:hover {
		color: var(--interactive-normal);
		background-color: var(--hover-accent);
	}
}

/* Syntax Highlighting: more contrast */
body.theme-light {
	--color-cyan: hsl(179 60% 38%);
}

.theme-light .cm-s-obsidian .cm-templater-command.cm-templater-execution-tag {
	color: hsl(66 100% 33%);
}

/* ───────────────────────────────────────────────── */
/** Lists
──────────────────────────────────────────────────── */

.markdown-rendered :is(ul, ol) {
	margin-top: 0.2em;
	margin-bottom: 0.2em;
}

.markdown-rendered ol {
	padding-inline-start: 1.9em;
}

.markdown-rendered ul:not(.contains-task-list, .dataview-result-list-ul, .has-list-bullet) {
	padding-inline-start: 1em;
}

.markdown-rendered ul.contains-task-list {
	padding-inline-start: 1.65em;
}

.has-list-bullet {
	padding-inline-start: 0;
}

/* ───────────────────────────────────────────────── */
/** Blockquotes
──────────────────────────────────────────────────── */

.markdown-source-view:not(.is-live-preview) .cm-line.HyperMD-quote.HyperMD-quote.HyperMD-quote {
	border-left: var(--blockquote-border-thickness) solid var(--blockquote-border-color);
}

.cm-hmd-indent-in-quote,
:is(.markdown-preview-view, .community-modal-readme) blockquote,
.cm-line.HyperMD-quote
	.cm-quote:not(
		.cm-formatting,
		.cm-url,
		.cm-link,
		.cm-hmd-internal-link,
		.cm-formatting-link,
		.cm-strong,
		.cm-em
	) {
	color: var(--text-normal);
}

.cm-line.HyperMD-quote .cm-quote.cm-strong {
	color: var(--bold-color);
}

.cm-line.HyperMD-quote .cm-quote.cm-em {
	color: var(--italic-color);
}

/* edit mode & live preview */
.HyperMD-quote.HyperMD-quote.HyperMD-quote {
	padding-top: 4px;
	padding-bottom: 4px;
	background-color: var(--blockquote-background-color);
	border-radius: var(--radius-s);
}

/* less padding between quote blocks */
.HyperMD-quote:not(.HyperMD-callout) + .HyperMD-quote.HyperMD-quote.HyperMD-quote {
	padding-top: 0;
}

/* style links in blockquotes, e.g. quote sources */
.cm-link.cm-quote:not(.cm-formatting) {
	color: var(--text-accent);
}

.cm-string.cm-url.cm-quote,
.cm-link.cm-quote {
	font-style: unset;
}

.is-live-preview .HyperMD-quote::before {
	border-radius: var(--radius-s) 0 0 var(--radius-s);
}

.is-live-preview .HyperMD-quote .cm-formatting-quote-1 {
	position: relative;
	left: 2px;
}

/* HACK live-preview: prevent rounded corners with consecutive block quotes */
body:not(.angular-shapes) .is-live-preview .HyperMD-quote + .HyperMD-quote::before {
	margin-top: -0.5em;
	border-bottom-left-radius: var(--radius-s);
}

/* HACK source-mode: prevent rounded corners with consecutive block quotes */
body:not(.angular-shapes) .markdown-source-view:not(.is-live-preview)
	.HyperMD-quote
	+ .HyperMD-quote::before {
	position: absolute;
	width: var(--blockquote-border-thickness);
	height: 1.5em;
	margin-top: -12px;
	margin-left: calc(-1 * (var(--blockquote-border-thickness)));
	white-space: pre;
	content: " ";
	background-color: var(--blockquote-border-color);
}

.markdown-source-view:not(.is-live-preview)
	.HyperMD-quote
	+ .HyperMD-quote.HyperMD-quote-lazy::before {
	margin-left: calc(-1 * (var(--blockquote-border-thickness) + 10px));
}

.markdown-source-view .HyperMD-quote + .HyperMD-quote::after {
	position: absolute;
	top: -8px;
	right: 0;
	/* so it does not overlay the callout header */
	z-index: -1;
	width: 0.5em;
	height: 1em;
	content: "";
	background-color: var(--blockquote-background-color);
}

/* Reading Mode */
:is(.markdown-preview-view, .community-modal-readme, .is-live-preview) blockquote {
	padding: 4px 12px;
	border-radius: var(--radius-s);
}

/* block quotes in lists */
.markdown-preview-view li blockquote {
	margin-top: 6px;
	margin-bottom: 2px;
}

blockquote,
.cm-hmd-indent-in-quote,
.HyperMD-quote.HyperMD-quote-1,
.cm-quote.cm-inline-code,
blockquote code {
	line-height: 1.4;
}

/* ───────────────────────────────────────────────── */
/** Strikethroughs
──────────────────────────────────────────────────── */

.cm-strikethrough {
	body:not(.uncolored-strikethroughs) & {
		text-decoration-color: var(--color-red);
	}

	&.cm-formatting {
		color: var(--color-red);
		text-decoration: none; /* make the "~" readable */
	}
}

/* ───────────────────────────────────────────────── */
/** Highlights
──────────────────────────────────────────────────── */

.theme-light {
	--highlight-hue-1: 50;
	--highlight-sla-values: 85% 70% / 40%;
}

.theme-dark {
	--highlight-hue-1: 50;
	--highlight-sla-values: 85% 40% / 40%;
}

mark,
.cm-highlight,
.style-settings-container {
	--highlight-color-1: hsla(var(--highlight-hue-1) var(--highlight-sla-values));
}

mark {
	padding-right: 2px;
	padding-left: 2px;
}

.markdown-rendered mark,
.cm-s-obsidian span.cm-highlight {
	background-color: var(--highlight-color-1);
}

/* ───────────────────────────────────────────────── */
/** Pandoc Citations
──────────────────────────────────────────────────── */

/* applies to all []-links (barelinks), partially also to footnotes */
.cm-hmd-barelink.cm-hmd-barelink.cm-hmd-barelink.cm-hmd-barelink.cm-hmd-barelink:not(
		.cm-formatting
	) {
	color: var(--secondary-accent);
}

.cm-hmd-barelink.cm-formatting:not(.cm-footref) {
	color: var(--text-faint);
}

/* ───────────────────────────────────────────────── */
/** Footnotes
──────────────────────────────────────────────────── */

/* footnotes-references in text */
.cm-footref.cm-footref.cm-footref.cm-footref,
.footnotes li::marker,
.cm-hmd-footnote.cm-hmd-footnote.cm-hmd-footnote.cm-hmd-footnote.cm-hmd-footnote,
.footnote-link {
	color: var(--secondary-accent);
}

/* bold to increase readability */
.cm-footref,
.footnote-link {
	font-weight: 600;
	text-rendering: geometricprecision;
}

body .HyperMD-footnote.cm-line.cm-line,
.footnotes.footnotes li {
	padding-top: 4px;
	padding-bottom: 4px;
	line-height: 1.2;
}

/* separator line above the first footnote */
.cm-line:not(.HyperMD-footnote) + .HyperMD-footnote.HyperMD-footnote,
.footnotes hr {
	padding-top: 12px;
	border-top: var(--basic-border);
}

.footnotes hr {
	margin-top: 40px;
	margin-bottom: 0;
}

.cm-line.HyperMD-footnote.HyperMD-footnote {
	padding-left: 0;
}

.footnote-link:hover {
	color: var(--text-accent-hover);
	text-decoration: none;
	/* remove underline which only decreases readability */
}

.footnote-backref {
	margin-left: 2px;
	font-family: inter, sans-serif;
	font-size: 90%;
	color: var(--text-gray);
	text-decoration: none;
}
/* ───────────────────────────────────────────────── */
/** Trailing Whitespace (Two Space Rule)
──────────────────────────────────────────────────── */
/* needs this selector, so it does not affect spaces in the table editor
 * (Obsidian 1.5), which only differs at the level of `.view-content` */
body:not(.hide-trailing-whitespace) .view-content
	> .cm-s-obsidian
	> div
	> .cm-scroller
	> .cm-sizer
	> .cm-contentContainer
	> .cm-content
	> .cm-line
	> :is(.cm-trailing-space-a, .cm-trailing-space-b, .cm-trailing-space-new-line)::after {
	font-size: 1em;
	font-weight: 600;
	color: var(--text-faint);
	content: "·";
}
