/* ───────────────────────────────────────────────────
/** Longform Sidebar
─────────────────────────────────────────────────── */

.workspace-leaf-content[data-type="VIEW_TYPE_LONGFORM_EXPLORER"] .tab-panel-container {
	padding: 0;
}

/* project picker */
.workspace-leaf-content .view-content div#project-picker-container {
	margin-bottom: 2px;
}

.workspace-leaf-content[data-type="VIEW_TYPE_LONGFORM_EXPLORER"] .current-draft-path {
	display: none;
}

#project-picker {
	background-color: var(--bg1);
	border-top: var(--thin-border);
	border-bottom: var(--thin-border);
}

div#select-projects select {
	border-radius: 0;
	padding: 6px;
	font-size: var(--font-small);
	font-weight: 700;
	color: var(--text-normal);
}

/* sidebar buttons */
.longform-explorer .tab-button.tab-button {
	&.selected.selected {
		background-color: var(--bg4);
		font-weight: 600;
		border-top: var(--thin-border);
		border-left: var(--thin-border);
		border-right: var(--thin-border);
	}
	/* so tabs do not move around on selection */
	border-right: 1px transparent solid;
	border-left: 1px transparent solid;
}

.longform-explorer .tab-list {
	padding: 0 2px;
	border-bottom: var(--thin-muted-border);
}

/* Scene List */
.longform-explorer.longform-explorer div#scene-list {
	margin: 0;
}

#scene-list .scene-container {
	width: 100%;
	padding: 3px 4px;
	line-height: 1.2em;
	white-space: normal;
	border: none;
	border-radius: 0;
	--longform-indent-size: 1.75em;

	& > div > div {
		margin-left: 0;
	}

	&[data-scene-indent="0"] {
		padding-left: 6px !important;
	}

	&[data-scene-indent="1"] {
		padding-left: calc(var(--longform-indent-size) * 1) !important;
	}

	&[data-scene-indent="2"] {
		padding-left: calc(var(--longform-indent-size) * 2) !important;
	}

	&[data-scene-indent="3"] {
		padding-left: calc(var(--longform-indent-size) * 3) !important;
	}

	&[data-scene-indent="4"] {
		padding-left: calc(var(--longform-indent-size) * 4) !important;
	}

	&.selected,
	&.selected .longform-scene-number {
		color: var(--color-accent);
	}

	&.selected {
		background-color: var(--nav-item-background-active);
	}

	&:hover {
		color: var(--hover-accent);
		background-color: var(--nav-item-background-hover);
	}

	&:hover .longform-scene-number.longform-scene-number {
		color: var(--hover-accent);
	}

	/* move folding arrows to the right */
	flex-direction: row-reverse;

	& > div {
		margin-left: 0;
	}

	/* grayed out scenes. `{-}` in pandoc indicates a section not be included in the ToC */
	[data-scene-path$=" {-}.md" i]:not(.selected, :hover) :is(div, .longform-scene-number) {
		color: var(--text-faint);
	}

	/* alternating row colors, factoring in the coloring */
	li:nth-child(even) & {
		background-color: var(--a-row);
	}
}

/* Longform Compile */
button.longform-remove-step-button.longform-remove-step-button.longform-remove-step-button,
.longform-compile-container .options-button.options-button.options-button {
	padding: 6px;
	background-color: transparent;
	box-shadow: none;
}

button.longform-remove-step-button.longform-remove-step-button.longform-remove-step-button {
	height: unset;
	padding: 2px;
}

/* new scene */
.longform-explorer .new-scene-container.new-scene-container {
	background-color: var(--bg3);
	border-top: var(--thin-muted-border);
	border-bottom: var(--thin-muted-border);
	padding: 4px 6px;
}

.longform-explorer.longform-explorer div#longform-unknown-files-wizard {
	border-top: var(--thin-muted-border);
	padding: 4px;
}

/* ───────────────────────────────────────────────────
/** Longform Editor
/** Writing cssclass
─────────────────────────────────────────────────── */
/* DOCS https://github.com/kevboh/longform#scene-only-styling */

/* font family and size */
.writing.markdown-preview-view,
:is(.writing, .longform-leaf) :is(.markdown-preview-view, .cm-contentContainer) {
	/* for table cells */
	--font-text: var(--longform-font-text-theme);
	font-family: var(--longform-font-text-theme);
	font-size: var(--longform-font-size);
	letter-spacing: var(--longform-letter-spacing);
}

/* keep any code smaller */
.app-container.app-container.app-container.app-container.app-container.app-container :is(
		.longform-leaf,
		.writing
	)
	:is(
		.frontmatter-container,
		.cm-hmd-frontmatter,
		.cm-formatting-task,
		.HyperMD-codeblock,
		code,
		.cm-inline-code,
		.HyperMD-table-row
	) {
	font-family: var(--font-monospace);
	font-size: 95%;
}

/* justify text */
body:not(.longform-left-aligned) :is(.writing, .longform-leaf) {
	hyphens: auto;
	text-align: justify;
}

/* stuff not to justify */
body:not(.longform-left-aligned) :is(.writing, .longform-leaf)
	:is(
		.HyperMD-codeblock,
		.HyperMD-header,
		.inline-title,
		.cm-hmd-frontmatter,
		.HyperMD-table-2,
		.table-cell-wrapper
	) {
	text-align: left;
}

/* headings */
.app-container :is(.writing, .longform-leaf)
	:is(h1, h2, h3, h4, h5, h6, .cm-header, .inline-title) {
	font-family: var(--longform-font-text-theme);
}

/* indented-text */
.longform-text-indent.longform-text-indent div:has(> p) + div > p {
	margin-top: 0;
	text-indent: 1.5em;
}

.longform-text-indent.longform-text-indent div:has(+ div > p) > p {
	margin-bottom: 0;
}

/* line height */
/* long selector needed to target only lines outside of a table */
:is(.writing, .longform-leaf)
	.view-content
	> .cm-s-obsidian
	> div
	> .cm-scroller
	> .cm-sizer
	> .cm-contentContainer
	> .cm-content
	> .cm-line:not(.HyperMD-header) {
	line-height: calc(var(--longform-base-line-height) + 0.35);
}

:is(.writing, .longform-leaf) :is(table, h1, h2, h3, h4, h5, h6, .inline-title),
:is(.writing, .longform-leaf) .table-wrapper .cm-line,
body:not(.is-popout-window)
	:is(.writing, .longform-leaf)
	.cm-line
	> :is(.cm-header, .cm-hmd-frontmatter) {
	line-height: var(--longform-base-line-height);
}

:is(.writing, .longform-leaf) .cm-header.cm-header {
	line-height: calc(var(--longform-base-line-height) + 0.05);
}

/* de-emphasized tasks */
body.longform-tasks-different :is(.writing, .longform-leaf)
	:is(.HyperMD-task-line, .HyperMD-task-line > *, ul.contains-task-list) {
	color: var(--text-faint);
}

/* fix for code block header hack */
.app-container :is(.writing, .longform-leaf) pre[class*="language-"]::before {
	line-height: calc(var(--longform-base-line-height) + 0.3);
}

/* ───────────────────────────────────────────────── */
/** Longform Smart Word Count
──────────────────────────────────────────────────── */

/* Show Word Count only on writing cssclass and longform notes.
- Supports Word Count Core Plugin + Better Word Count Community Plugin.
- Caveat: also triggered when such a note is open is in a non-active tab, restricting
this to the active tab would require nested `:has()` which isn't supported */
.wordcount-only-when-writing:not(.is-mobile) .horizontal-main-container:not(
		:has(:is(.writing, .longform-leaf))
	)
	+ .status-bar
	:is(.plugin-word-count, .plugin-better-word-count) {
	display: none;
}
