/* === README ===
	Snippet: MCL Wide Views / Author: Faiz Khuzaimah / twitter: @faizkhuzaimah / github: https://github.com/efemkay
	Version 0.6.3 (updated 2022-11-18)
	- compatibility update to Minimal theme v6.1.9 especially multi column admonition and wide-page
	Version 0.6.2 (updated 2022-10-22)
	- update to support Obsidian 1.0.0
	- Fix wide-page not renderring properly in editing view (conflict with global/vault wide settings
	- Adjusted the variable for Adjustable RLL to make use of Obsidian default variable --file-line-width. Changes not break the settings as I mapped it to MCL own variable --adj-rll-max-width
	- Fix for wide-table not renderring properly in editing view for Minimal theme.
	Version 0.6.0 (updated 2022-09-25)
	- fix to support Obsidian v0.16.x (mostly editing view and global settings)
	- code cleanup

	What is this snippet for?
	- for any users to use with any theme to complement any missing page/block width control
	- some features will require mgmeyer's Contextual Typography (CT) plugin
	- available cssClass:
		- wide-page
		- wide-dataview (require CT plugin)
		- wide-table (require CT plugin)
		- wide-callout
		- wide-backlinks
		- narrow-page
		- cssClass toggle: is-adj-rll and adj-rll-max-width

	Credits
	- Kevin Powell Youtube channel
	- hydescarf for accomodating my snippets adjustment
*/

/* @settings

name: Modular CSS Layout - Wide Views
id: modular-css-layout-wv
settings:

	-
		id: adj-rll-title
		title: Adjustable RLL Settings
		description: Control max-width for all page/note by default. RLL must be **enabled**
		type: heading
		level: 2
		collapsed: true
	-
		id: is-adj-rll
		title: Enable Adjustable RLL
		description: Add is-adj-rll class to the body element
		type: class-toggle
	-
		id: adj-rll-max-width
		title: Max Width for Normal Width page (any unit e.g. px, em, ch)
		type: variable-text
		default: 750px

    -
        id: wide-view-title
        title: Wide Page/Dataview/Table/Backlinks/Callout Settings
		description: Control max-width block for page with cssClass `wide-page`. RLL can be enabled or disabled
        type: heading
        level: 2
        collapsed: true
    -
        id: normal-max-width
        title: Max Width for Normal Width block (any unit e.g. px, em, ch)
        type: variable-text
        default: 750px
	-
		id: wide-dataview-global
		title: Enable `wide-dataview` vault-wide
		description: use `wide-dataview` in yaml to enable only for selected note/page
		type: class-toggle
	-
		id: wide-table-global
		title: Enable `wide-table` vault-wide
		description: use `wide-table` in yaml to enable only for selected note/page
		type: class-toggle
	-
		id: wide-callout-global
		title: Enable `wide-callout` vault-wide
		description: use `wide-callout` in yaml to enable only for selected note/page
		type: class-toggle
	-
		id: wide-backlinks-global
		title: Enable `wide-backlinks` vault-wide
		description: use `wide-backlinks` in yaml to enable only for selected note/page
		type: class-toggle

    -
        id: narrow-view-title
        title: Narrow Page Settings
		description: Control max-width page/note with cssClass `narrow-page`. RLL must be **disabled**
        type: heading
        level: 2
        collapsed: true
    -
        id: narrow-max-width
        title: Max Width for Narrow View page (any unit e.g. px, em, ch)
        type: variable-text
        default: 750px

*/

body{
	--normal-max-width: var(--file-line-width);
	--narrow-max-width: var(--file-line-width);
	--adj-rll-max-width: 750px;
}

/* === Wide Page === */


	/* --- Editing View ---
		- set Readable Line Length (RLL) to wide (100%) for any css class with "wide" word in it.
		- "width:100%" added for Blue Topaz
		- .cm-content added to override Mado 11
		- focus to fix for v0.16.x -- .markdown-source-view.mod-cm6 .cm-sizer
	*/

	/* - WPEV - */
	/* Main code */
	/* Set the containers (all relevant levels) to max-width 100%. Applicable to global and per note (cssClass) */
	/* selector for editing container .cm-sizer */
	:is(body[class*="wide-"], div[class*="wide-"].markdown-source-view.mod-cm6.is-readable-line-width) .cm-sizer,
	/* selector for sub containers
		- .cm-contentContainer, .cm-contentContainer > .cm-content, .cm-contentContainer > .cm-content > div
		- .embedded-backlinks, .embedded-backlinks > div */
	:is(body[class*="wide-"]:not(.max-view-enabled), div[class*="wide-"].markdown-source-view.mod-cm6) :is(.cm-contentContainer.cm-contentContainer, .cm-contentContainer.cm-contentContainer > .cm-content, .cm-contentContainer.cm-contentContainer > .cm-content > div, .embedded-backlinks, .embedded-backlinks > div)
		{ max-width: 100%; width: 98%;}

	/* Special adjustment - for Minimal
		- it has table also set with max-width. but table require separate line because we don't want width: 100% as that would stretch the table
		- but for callout, require width: auto */
	div[class*="wide-"].markdown-source-view.mod-cm6 .cm-contentContainer.cm-contentContainer > .cm-content table { max-width: 100% }
	div[class*="wide-"].markdown-source-view.mod-cm6.is-readable-line-width .cm-embed-block:is(.cm-callout, .admonition-parent) > .callout { max-width: 100%; width: auto;}
		/* overriding margin-left setting to obsidian "default" */
	div[class*="wide-page"].markdown-source-view.mod-cm6 .embedded-backlinks,
	div[class*="wide-page"].markdown-source-view.mod-cm6 .cm-contentContainer > .cm-content > div
		{margin-left: 20px !important; }
	div[class*="wide-"].markdown-source-view.mod-cm6.is-readable-line-width .cm-embed-block:is(.cm-callout, .admonition-parent) > .callout
		{ margin-left: 0 !important; }

	div[class*="wide-page"].markdown-source-view.mod-cm6.is-readable-line-width table
		{margin-left: unset !important; }

	/* Additional Note
		- Yin Yang uses .markdown-source-view.mod-cm6 { width: !important;}. I'm skipping fixes for this until there's user request
		- added :is(body:not(.max-view-enabled) .mod-root) to accomodate for Shimmering Focus, does not affect other themes */


	/* --- Reading View --- */
	/* -- similar to Editing View (WPEV), set the RLL to 100% for any css class with "wide" word in it
		- :is() used for OR between global toggle and "cssClass" in yaml
		- "width:100%" added for Blue Topaz */

	/* - WPRV - */
	/* Main code */
	/* Set the containers (all relevant levels) to max-width 100%. Applicable to global and per note (cssClass) */
	body[class*="wide-"] :is(.markdown-preview-sizer.markdown-preview-sizer, .markdown-preview-sizer.markdown-preview-sizer > div),
	div[class*="wide-"].markdown-preview-view :is(.markdown-preview-sizer.markdown-preview-sizer, .markdown-preview-sizer.markdown-preview-sizer > div)
		{ max-width: 100%; margin-inline: auto; width: 100%;}

	/* Special adjustment - for Minimal theme */
	div[class*="wide-"].markdown-preview-view {padding-inline: 30px;}

	/* special line just for Atom theme -- commented out for now */
	/*
	div[class*="wide-"].markdown-preview-view .markdown-preview-sizer.markdown-preview-sizer,
	div[class*="wide-"].markdown-preview-view .markdown-preview-sizer.markdown-preview-sizer > div
		{ max-width: 100% !important; } */


/* === Wide Blocks (i.e. Dataview, Table, Callout & Backlink) === */


	/* --- Editing View ---
	   - For Editing View, the approach is slightly different. After "wide-page" set all max-width to 100%, I adjust the .cm-content > * blocks to normal width and then selectively target blocks for wide width
	   - must note to ensure specificity rule over some theme), then
	   - global settings selector need to be separated to ensure it is not conditional to cssClass yaml
	   - `body[class*="wide-"]` used for global settings, `div[class*="wide-"].markdown-preview-view` used for per note cssClass
	*/

	/* - WBEV - */
	/* Main code */
	/* Generally set all blocks to normal width, no need (yet) for global settings as I didn't adjust it Wide Page above */
	/* set .cm-sizer > .inline-title to normal width. has to be separated because i don't want margin auto */
	:is(body[class*="wide-"]:not(.max-view-enabled) .mod-root .markdown-source-view.mod-cm6:not(.wide-page), div.markdown-source-view.mod-cm6:is(.wide-dataview,.wide-table,.wide-backlinks,.wide-callout)) .cm-sizer > .inline-title
		{ max-width: var(--normal-max-width); width: 100%; margin-inline: auto; }
	/* set normal width to `.cm-content > div` and `.embedded-links` only (override the WPEV) */
	:is(body[class*="wide-"]:not(.max-view-enabled) .markdown-source-view.mod-cm6:not(.wide-page), div[class*="wide-"].markdown-source-view.mod-cm6:not(.wide-page)) :is(.cm-contentContainer.cm-contentContainer > .cm-content > div, .cm-sizer > .embedded-backlinks)
		{ max-width: var(--normal-max-width); margin-inline: auto !important; } /* important for margin needed because app.css:1473 use it for .cm-contentContainer > .cm-content > * */

	/* selectors to set dataview, table, callout and/or backlinks to wide */
	:is(body.wide-dataview-global:not(.max-view-enabled) .mod-root .markdown-source-view.mod-cm6, div[class*="-dataview"].markdown-source-view.mod-cm6) .cm-contentContainer.cm-contentContainer > div > div:is(.cm-preview-code-block),
	:is(body.wide-table-global:not(.max-view-enabled) .mod-root .markdown-source-view.mod-cm6, div[class*="-table"].markdown-source-view.mod-cm6) .cm-contentContainer.cm-contentContainer > div > div:is(.HyperMD-table-row, .cm-table-widget),
	:is(body.wide-callout-global:not(.max-view-enabled) .mod-root .markdown-source-view.mod-cm6, div[class*="-callout"].markdown-source-view.mod-cm6) .cm-contentContainer.cm-contentContainer > div > div:is(.cm-callout),
	/* selectors to set backlinks to wide -- not fix yet for 0.16.x */
	:is(body.wide-backlinks-global:not(.max-view-enabled) .mod-root .markdown-source-view.mod-cm6, div[class*="-backlinks"].markdown-source-view.mod-cm6) .cm-sizer > div:is(.embedded-backlinks)
		{ max-width: 100%; }


	/* Special adjustment - for Minimal */
	:is(body:not(.max-view-enabled) .mod-root) div[class*="-dataview"].markdown-source-view.mod-cm6 .cm-contentContainer.cm-contentContainer > div > div:is(.cm-preview-code-block) > div
		{ width: unset;}
	/* Special adjustment - for Minimal - to override custom margin-left that uses !important */
	.wide-table.markdown-source-view.mod-cm6.is-readable-line-width table {margin-left: auto !important; }

	/* Additional Notes
		- Minimal removes inline padding for .markdown-source-view.mod-cm6 .cm-scroller so it is flushed to the very edges (no way to adjust currently)
		- added :is(body:not(.max-view-enabled) .mod-root) to accomodate for Shimmering Focus, does not affect other themes */


	/* --- Reading View ---
		- Similar to WBEV, the approach is to leverage on WPRV setting all blocks to wide, set `.markdown-preview-sizer > div` to normal and set related block to wide again
		- For Reading View, wide-dataview and wide-table will require Contextual Typography plugin
		- :is() used to couple global toggle with yaml cssClass
		- wide backlinks still cannot be implemented in 0.16.x as the it is located one div deeper than `.markdown-preview-sizer > div` which means I need to do "look-back", achievable only with :has()
	*/

	/* - WBRV - */
	/* Main code */
	/* set the containers to normal width */
	:is(body[class*="wide-"] .markdown-preview-view:not(.wide-page), div[class*="wide-"].markdown-preview-view:not(.wide-page)) .markdown-preview-sizer.markdown-preview-sizer > div
		{ max-width: var(--normal-max-width); margin-inline: auto; } /* important is for Atom theme */
	/* set the related blocks to wide width */
	:is(body.wide-dataview-global, div[class*="-dataview"].markdown-preview-view) .markdown-preview-sizer.markdown-preview-sizer > div:is(.el-lang-dataview),
	:is(body.wide-table-global, div[class*="-table"].markdown-preview-view) .markdown-preview-sizer.markdown-preview-sizer > div:is(.el-table),
	:is(body.wide-callout-global, div[class*="-callout"].markdown-preview-view) .markdown-preview-sizer.markdown-preview-sizer > div[data-callout],
	/* comment out wide backlinks as no possible fix (yet) for 0.16.x due to notes above *//*
	:is(body.wide-backlinks-global, div[class*="-backlinks"].markdown-preview-view) .markdown-preview-sizer.markdown-preview-sizer > div:is(.embedded-backlinks)
		{ max-width: 100%; }
	*/

	/* Special adjustment - for Minimal - it also somehow set the table width within dataview block */
	:is(body.wide-dataview-global, div[class*="-dataview"].markdown-preview-view) .markdown-preview-sizer.markdown-preview-sizer > div:is(.el-lang-dataview) table
		{ max-width: 100%; }
	/* Special adjustment - for Minimal - to override Minimal custom width */
	body[class*="global"].contextual-typography .markdown-preview-view.is-readable-line-width .markdown-preview-sizer > div { width: 100%; }

	/* Additional Notes
		- .markdown-preview-section is same div as .markdown-preview-sizer
		- Atom uses !important for .markdown-preview-view.is-readable-line-width .markdown-preview-section {...}
			- cannot adjust this at the moment without disrupting other theme's layout */


	/* Editing and Reading View -- Special Adjustment
		- for table for all theme, since its table not auto margin */
	:is(body.wide-table-global, div[class*="wide-table"]) table { margin-inline: auto; }


/* === Narrow Page === */
/* cssClass YAML to allow users with disabled RLL to introduce RLL per page/note basis */


	/* --- Editing View ---
		- Set Readable Line Length (RLL) to wide (100%) for any css class with "wide" word in it
	*/

	/* - NPEV - */
	/* Main code */
	/* set the containers to narrow width. `div.cm-content` added to override Mado 11 */
 	div[class*="narrow-"].markdown-source-view.mod-cm6 .cm-contentContainer.cm-contentContainer,
 	div[class*="narrow-"].markdown-source-view.mod-cm6 .cm-contentContainer.cm-contentContainer > .cm-content,
 	div[class*="narrow-"].markdown-source-view.mod-cm6 .cm-contentContainer.cm-contentContainer > .cm-content > div,
 	div[class*="narrow-"].markdown-source-view.mod-cm6 .cm-contentContainer.cm-contentContainer > .embedded-backlinks,
 	div[class*="narrow-"].markdown-source-view.mod-cm6 .cm-contentContainer.cm-contentContainer > .embedded-backlinks > div
 		{ max-width: var(--narrow-max-width); margin-inline: auto; }

	/* Special adjustment - for Minimal */
	/* it has table also set with max-width. but table require separate line because we don't want margin: auto that would center the table relative to other elements like para */
	div[class*="narrow-"].markdown-source-view.mod-cm6 .cm-contentContainer.cm-contentContainer > .cm-content table
		{ max-width: var(--narrow-max-width); }
 	/* for Minimal theme but affecting all theme. Minimal apparently uses !important to control margin the adjustment is still safe because for narrow-page you would want margin: auto anyway */
	div[class*="narrow-"].markdown-source-view.mod-cm6:not(.is-readable-line-width) .cm-contentContainer
		{ margin-inline: auto !important; }


	/* --- Reading View ---
		- Similar to Editing View, set the RLL to 100% for any css class with "wide" word in it.
	*/

	/* - NPRV - */
	/* Main code */
 	/* set the note with cssClass: narrow- to max-width of the narrow width */
 	div[class*="narrow-"].markdown-preview-view .markdown-preview-sizer.markdown-preview-sizer, /* double-up for specificity */
 	div[class*="narrow-"].markdown-preview-view .markdown-preview-sizer.markdown-preview-sizer > div
 		{ max-width: var(--narrow-max-width); margin-inline: auto;}

 	/* Special adjustment - for Minimal theme */
 	div[class*="narrow-"].markdown-preview-view {padding-inline: 30px;}


/* === Adjustable RLL === */
/* cssClass toggle to allow users to adjust the RLL via Style Settings */
/* Obsidian v1.0.0 makes it easier to do adjustable RLL -- just single line css ;) */

	/* --- Editing and Reading View --- */
	/* - AREV and ARRV - */
	body.is-adj-rll { --file-line-width: var(--adj-rll-max-width); }

	/* I still save below snippet for future references. May delete later */

		/* --- Editing View ---
			- Set Readable Line Length (RLL) to wide (100%) for any css class with "wide" word in it.
		*/

		/* - AREV - */
		/* Main code */
		/* set the containers to the custom adj rll width. `div.cm-content` added to override Mado 11 *//*
	    .is-adj-rll .markdown-source-view.mod-cm6 .cm-contentContainer.cm-contentContainer,
		.is-adj-rll .markdown-source-view.mod-cm6 .cm-contentContainer.cm-contentContainer > .cm-content,
		.is-adj-rll .markdown-source-view.mod-cm6 .cm-contentContainer.cm-contentContainer > .cm-content table, /* for minimal *//*
		.is-adj-rll .markdown-source-view.mod-cm6 .cm-contentContainer.cm-contentContainer > .cm-content > div,
		.is-adj-rll .markdown-source-view.mod-cm6 .cm-contentContainer.cm-contentContainer > .embedded-backlinks,
		.is-adj-rll .markdown-source-view.mod-cm6 .cm-contentContainer.cm-contentContainer > .embedded-backlinks > div
			{ max-width: var(--adj-rll-max-width); margin-inline: auto; }

		/* --- Reading View ---
			- Similar to Editing View, set the RLL to 100% for any css class with "wide" word in it
		*/

		/* - ARRV - */
		/* Main code */
		/* set the containers to the custom adj rll width *//*
		.is-adj-rll .markdown-preview-view .markdown-preview-sizer.markdown-preview-sizer, /* double-up for specificity *//*
		.is-adj-rll .markdown-preview-view .markdown-preview-sizer.markdown-preview-sizer > div
			{ max-width: var(--adj-rll-max-width); margin-inline: auto;}
