/* === README ===
	Snippet: MCL Gallery Cards / Author: Faiz Khuzaimah / twitter: @faizkhuzaimah / github: https://github.com/efemkay
	Version 0.8.0 (updated 2022-11-28)
	- adjustment for SNW plugin indicators in image gallery. Option to hide (default) or show.
	- fix gap between the images in image gallery (especially the vertical vs horizontal gap)
	Version 0.6.2 (updated 2022-10-22)
	- rollover main branch to support Obsidian 1.0.0
	Version 0.5.0 (updated 2022-09-17)
	- added mermaid scale and zoom feature. FR #19 on GH.
	version 0.3.1 (2022-06-26)
	- fix table mis-formatting
	- completed callout and paragraph-based image gallery
	- added dimension control for images in lists

	This snippet is part of MCL collection of snippets for customising layout, and it provides the following
	- "gallery" callout-metadata i.e. [!<any-callout>|gallery] for flex/grid layout
		- use together with MCL Multi Column [!blank-container] for invisible container
	- YAML `cssClass: image-gallery` to achieve similar to callout but using only Contextual Typography plugin & <p>
	- Image Zoom via css
	- Dimension control for images in lists <ul>

	Credits to @kepano Minimal Theme and @SlRvb ITS Theme for inspiration
*/
/* === Master Setting === */

	/* set the defaults */
	body{
		--img-border-radius: 15px;
		--img-max-height: 300px;
		--img-max-width: 350px;
		--img-max-height-list: 270px;
		--img-max-width-list: 300px;
		--callout-gallery-gap: 5px;
		--gallery-snw-display: none;
	}

	img {border-radius: var(--img-border-radius);}

	img[alt*="right"] {float: right; margin-left: 0.5em; }


/* === Image Gallery using <p> and Callout === */

	/* Editing and Reading View - Gallery using <p> and Callout. Using <p> (in Reading View) to contain and format as gallery view using metadata="gallery" to contain and format as gallery view */
		/* Create display: flex and key adjustment on margin and gap */
		.image-gallery div[data-embed-type="image"] > p,
		div[data-callout-metadata*="gallery"].callout > .callout-content > p
			{ display: flex; gap: var(--callout-gallery-gap); margin-top: calc( var(--callout-gallery-gap) ); margin-bottom: 0; }
		.image-gallery div[data-embed-type="image"].el-embed-image.el-p { margin-top: var(--callout-gallery-gap); }
		div[data-callout-metadata*="gallery"].callout > .callout-content { --callout-content-padding: 0.5rem 0 0 0; }
		/* Introduce subtle border and make the gallery as object-fit: cover */
		.image-gallery div[data-embed-type="image"] > p img,
		div[data-callout-metadata*="gallery"].callout > .callout-content > p img
			{ max-height: var(--img-max-height); border: 1px solid var(--background-modifier-border); object-fit: cover; display: block;}
		/* display: block for img is important to control the hidden margin-bottom but for Minimal, it uses display: flex for top level divs which pose another "margin" issues no plan to solve yet as this is not critical */

		/* Editing View - as alternate to <p> in Reading View since there's no natural container in Editing View using <p> */
		.image-gallery div:not(.cm-callout):not(.HyperMD-list-line).image-embed img
			{ max-height: calc(var(--img-max-height)/1.5); display: unset; object-fit: cover; margin-right: var(--callout-gallery-gap); }
		/* previously i have max-width: 50% */

	/* Special Adjustment for Shimmering Focus. Reading View. Overriding max-width */
		body:not(.is-mobile) .app-container.app-container .image-gallery p img[src],
		body:not(.is-mobile) .app-container.app-container div[data-callout-metadata*="gallery"].callout img[src]
			{ max-width: 100%; width: unset; margin-block: unset;}

	/* Special Adjustment for Minimal theme. Left margin. Editing Live Preview. */
	.markdown-source-view.mod-cm6.is-readable-line-width .internal-embed
		{ margin-left: 0 !important; width: unset;}
	/* Special Adjustment for Minimal theme. Override width: 100% */
		.full-width-media .image-gallery .image-embed img:not(.emoji):not([width]) { width: unset; }

	/* Special Adjustment - for SNW plugin */
		.image-gallery div[data-embed-type="image"] > p .snw-embed-preview,
		.image-gallery .internal-embed.image-embed ~ .snw-reference.snw-embed,
		div[data-callout-metadata*="gallery"].callout > .callout-content > p .snw-embed-preview
			{ display: var(--gallery-snw-display); width: min-content; height: min-content; }
		div[data-callout-metadata*="gallery"].callout > .callout-content > p .internal-embed.image-embed ~ br {display: none;}

/* === Images in Lists === */
	/* limit the width when in a list (ul only) */
	body:not(.list-image-control-off) :is(.HyperMD-list-line,ul) .image-embed.image-embed img:not([width])
		{ max-height: var(--img-max-height-list); max-width: var(--img-max-width-list); margin-inline: 0; display: unset; object-fit: cover; }

	/* clamping max width to viewport when in mobile. possibly can adopt for desktop as well */
	body.is-mobile:not(.list-image-control-off) :is(.HyperMD-list-line,ul) .image-embed.image-embed img:not([width])
		{ max-width: clamp(calc(var(--img-max-width-list)/2), var(--img-max-width-list), 100%);}

	/*
	div:not(.cm-callout).image-embed img { max-height: 200px; max-width: 300px; height: 200px; object-fit: cover;}
	*/

/* === Image Zoom === */
/* must check "Enable Image Zoom via CSS" via Style Settings */

	/* set scale to 100% for images */
	.image-zoom .view-content :is(.cm-editor, .markdown-preview-view) img { max-width: 100%; cursor: zoom-in; }

	/* css zoom for images */
	body.image-zoom:not(.is-mobile) .view-content :is(.cm-editor,.markdown-preview-view) img:active,
	body.image-zoom:not(.is-mobile) .view-content .image-embed:active,
	.image-zoom :is(.HyperMD-list-line,ul) .image-embed.image-embed img:active {
		cursor: zoom-out; display: block; background: rgba(0,0,0,0.5);
		max-height: calc(100% + 1px); max-width: calc(100% - 20px); height: calc(100% + 1px); width: 100%;
		object-fit: contain; margin: -0.5px auto 0; padding: 0; text-align: center;
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
	}

/* === Mermaid SVG max-width 100% and zoom on click  === */
/* for Mermaid SVG zoom, must check "Enable Mermaid Zoom via CSS" via Style Settings */

	/* set scale to 100% for mermaid diagram */
	body:not(.mermaid-scale-off) .view-content :is(.cm-editor, .markdown-preview-view) .mermaid svg { max-width: 100%; height: 100%}
	.mermaid-zoom .view-content :is(.markdown-preview-view) .mermaid svg { cursor: zoom-in; }

	/* css zoom for mermaid diagram */
	body.mermaid-zoom:not(.is-mobile) .view-content :is(.cm-edito,.markdown-preview-view) .mermaid svg:active {
		cursor: zoom-out; display: block; object-fit:contain; margin: -0.5px auto 0; padding: 0;
		max-height: calc(100% + 1px); max-width: calc(100% - 20px); height: calc(100% + 1px); width: 100%;
		text-align: center; z-index: 100; position: fixed; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.8);
	}


/* === ALPHA VERSION table-card === */
	/* setting the borders */
	.table-card table > tbody > tr,
	.table-card.markdown-source-view.mod-cm6 .dataview.table-view-table .table-view-tbody tr {border: 1px solid black; border-radius: 0.5em;}
	.table-card.markdown-source-view.mod-cm6 .dataview.table-view-table .table-view-tbody td {border-right: unset;}

	:is(.theme-light, .theme-dark) .table-card table,
	.table-card:is(*,.is-live-preview.is-live-preview) table :is(td,tr) {background-color: unset;}
	.table-card .dataview.table-view-table.dataview.table-view-table {border: unset;} /* for primary */
	.table-card table tbody {	display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 0.5em; clear: both;}
	.table-card table > tbody > tr {display: flex; flex-direction: column; padding-inline: 0.5em;}

	.table-card:is(*,.is-live-preview) table.table-view-table > tbody > tr > td:not(:first-child) {border-top: 1px solid gray; }
	.table-card table.table-view-table > tbody > tr {margin: unset;}

	/* thead adjustment */
	/* table > thead {display: flex; } */
	.table-card table > thead {float: right;}
	.table-card table.table-view-table > thead > tr {margin: unset;}
	.table-card table.table-view-table > thead > tr > th {border: unset;}
	.table-card .dataview.table-view-table.dataview.table-view-table :is(thead, th) {padding-block: unset;}


/* === ALPHA VERSION testing Timeline in lists === */
/*
    .tag-mcltimeline > ul > li > *:not(ul) { text-align: center; align-self: baseline; }
    .tag-mcltimeline > ul > li {
        display: grid;
        grid-template-columns: 0 3fr 7fr;
        grid-template-rows: auto;
        grid-template-areas:
            "indicator timeline details"
            "indicator . details";
        grid-column-gap: 1em;

    }
    .tag-mcltimeline > ul > li > ul { grid-area: details; text-align: left; }
    .tag-mcltimeline > ul > li > .collapse-indicator { grid-area: indicator; }
    .tag-mcltimeline > ul ul { margin-left: 0.5em; }
*/




/* @settings

name: Modular CSS Layout - Gallery Cards
id: modular-css-layout-gc
settings:

	-
		id: gc-general-title
		title: General Image Settings
		type: heading
		level: 2
		collapsed: true
	-
        id: image-zoom
        title: Enable Image Zoom via CSS
        type: class-toggle
	-
		id: img-border-radius
		title: Image Border Radius (any unit, no space)
		type: variable-text
		default: 15px


    -
        id: gc-callout-title
        title: Image Gallery Settings
		description: For image gallery using `gallery` callout-metadata and `image-gallery` YAML
        type: heading
        level: 2
		collapsed: true
	-
		id: gallery-snw-display
		title: Hide Strange New World Indicators in Image Gallery
		type: variable-select
		default: none
		options:
			-
				label: Show
				value: inline-block
			-
				label: Hide
				value: none
	-
		id: callout-gallery-gap
		title: Gallery Callout Gap (any unit, no space)
		type: variable-text
		default: 5px
    -
        id: img-max-height
        title: Max Height for Images (any unit, no space)
        type: variable-text
        default: 300px
	-
		id: img-max-width
		title: Max Width for Images (any unit, no space)
		type: variable-text
		default: 350px


	-
		id: gc-list-title
	    title: Image in List Settings
	    type: heading
	    level: 2
		collapsed: true
	-
        id: list-image-control-off
        title: Disable Control for Image in List
		description: Disabling will revert image dimension to Obsidian default behaviour
        type: class-toggle
	-
	    id: img-max-height-list
		title: Max Height for Images (any unit, no space)
	    type: variable-text
	    default: 270px
	-
		id: img-max-width-list
		title: Max Width for Images (any unit, no space)
		type: variable-text
		default: 300px

	-
		id: gc-mermaid-title
		title: Mermaid SVG Settings
		type: heading
		level: 2
		collapsed: true
	-
        id: mermaid-scale-off
        title: Disable scaling for Mermaid diagram
		description: Disabling will revert Mermaid diagram dimension to Obsidian default behaviour
        type: class-toggle
	-
        id: mermaid-zoom
        title: Enable Image Zoom via CSS
        type: class-toggle
*/