/* ───────────────────────────────────────────────── */
/** Tables
──────────────────────────────────────────────────── */
/* most table styling done via Obsidian Variables */

/* FIX wrong variable in Obsidian core */
.markdown-rendered th {
	line-height: var(--table-line-height);
}

/* make lists in tables take up less space */
.markdown-rendered table :is(ul, ol) {
	line-height: 1.1;
	margin-block: 0 0 !important;
	margin-top: 0;
	margin-bottom: 0;
}

.markdown-preview-view table {
	margin-top: 0.5em;
	margin-bottom: 1.2em;
}

.is-live-preview.markdown-source-view.mod-cm6 .cm-embed-block:hover {
	border-radius: 0;
}

/* FIX disable buggy hover effect on odd table rows */
body .markdown-rendered tbody tr:nth-child(odd):hover {
	background-color: var(--table-row-alt-background);
}

/* automatically turn off readable line length when there is a table */
.unrestricted-line-length-tables:not(.is-mobile)
:is(.markdown-source-view, .markdown-preview-view):has(table, .HyperMD-table-2) {
	--file-line-width: 100%;
}

/* Obsidian 1.5: Active Table Cells (requires Obsidian installer 1.1.9) */
.table-cell-wrapper:has(.cm-s-obsidian) {
	outline: 2.5px solid var(--color-accent);
}

/* FIX lists in tables looking off */
.table-cell-wrapper .list-bullet {
	float: none;
}

/* ───────────────────────────────────────────────── */
/** Images
──────────────────────────────────────────────────── */
/* .workspace-leaf-content so images in modal aren't affected, :not([data-type="image"]) so
 * images as files aren't affected */
body:not(.is-mobile, .max-image-size-toggle) .workspace-leaf-content:not([data-type="image"])
	img:not(:active),
body:not(.is-mobile, .max-image-size-toggle) .oz-image-widget-cm6 > img:not(:active) {
	max-width: calc(var(--image-size) * 1%);
	cursor: zoom-in;
}

/* Remove Image Size Toggle in Style settings, since only used for command
 * (see dummy setting in Style Settings) */
.style-settings-container .setting-item[data-id="max-image-size-toggle"] {
	display: none;
}

/* images as file with reduced with to avoid collusions with breadcrumbs or
 * traffic lights */
.workspace-leaf-content .image-container img {
	max-width: 97%;
	margin-top: 1em;
}

/* Image Alt as caption
(except when no explicit alt is provided and urls are the alt text) */
body:not(.no-image-alttext-caption)
.image-embed[alt]:not(
	[alt$=".png"],
	[alt$=".jpg"],
	[alt$=".jpeg"],
	[alt$=".tiff"],
	[alt$=".heic"],
	[alt$=".icns"],
	[alt$=".webp"]
)::after {
	padding-top: 2px;
	margin-bottom: 1em;
	font-family: var(--font-interface);
	font-size: var(--font-smaller);
	font-style: italic;
	color: var(--text-gray);
	content: attr(alt);
}

/* centers image caption */
body:not(.no-image-alttext-caption) .image-embed::after {
	display: block;
	text-align: center;
}

/* .emoji class are Twitter Images for Emojis from Emoji Toolbar */
.view-content img[src]:not(.emoji, .link-favicon) {
	border: var(--thin-muted-border);
	border-radius: var(--radius-s);
}

/* center image */
.markdown-source-view.mod-cm6 .cm-content > img,
.view-content .image-embed img:not(.emoji) {
	display: block;
	margin-right: auto !important;
	margin-left: auto !important;
}

/* ───────────────────────────────────────────────── */
/** Embeds
──────────────────────────────────────────────────── */
/* INFO do not set border-radius for embeds, since it results in blurry font,
* see #324 */

.markdown-embed .embed-title {
	font-family: var(--font-heading-theme);
	font-size: var(--h5-size);
	letter-spacing: var(--heading-letter-spacing);
	padding-bottom: 0;
}

/* fix placement of link icon */
body:not(.no-heading-background) .markdown-embed[data-type="heading"] .markdown-embed-link {
	top: 9px;
	right: 14px;
}
