/* === README for MCL Wide Views snippet / Author: Faiz Khuzaimah / twitter: @faizkhuzaimah / github: https://github.com/efemkay
    Ver 0.9.6 (updated 2023-09-09) - Code refactor to make use predefined variables and more efficient code base
    - refactor all wide views features. require Obsidian installer v1.1.9.
    - fixed all issues from previous codebase
	Version 0.9.4 (updated 2023-07-05)
	- fixed wide-backlinks not working since Obsidian V1
	- improved support for Minimal V7

	What is this snippet for?
	- for any users to use with any theme to complement any missing page/block width control
	- available cssClass:
		- wide-page
        - wide-table
		- wide-dataview
		- wide-callout
		- wide-backlinks
		- narrow-page
    - style settings toggle
		- is-adj-rll with adj-rll-max-width input

    Important Notice
    - this snippet requires Obsidian installer version (not app version) of 1.1.9 or higher as it requires Electron v21

	Credits
	- Kevin Powell Youtube channel
*/

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

    /* -- Main Code - EV & RV -- */
    body .wide-page { --file-line-width: 100%; }


    /* -- Special adjustment for Community Themes */

        /* Minimal */
        body[class*="minimal-tab-title"] .wide-page {
            --line-width: 100%;
            --max-width: 95%;
            --container-table-width: var(--line-width);
            --container-table-max-width: var(--max-width);
        }

        /* AnuPpuccin */
        /* body .wide-page { --anp-preview-width-pct: 100%; } */


/* === 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 ;) */

	/* -- Main Code - Editing and Reading View -- */
	body.is-adj-rll .view-content { --file-line-width: var(--adj-rll-max-width); }



/* === Narrow Page === */
    /* cssClass YAML to allow users with disabled RLL to introduce RLL per
       page/note basis. width is following obsidian default setting, or you
       can change it via MCL's Adjustable RLL */

    /* -- Main Code - Editing and Reading View -- */
    .narrow-page.markdown-source-view .cm-sizer,
    .narrow-page.markdown-preview-view .markdown-preview-sizer {
        max-width: var(--file-line-width);
        margin-inline: auto;
    }



/* === General Setups for Wide Blocks === */

    /* -- Setup for @container -- */
    :is(.wide-table-global, .wide-dataview-global, .wide-callout-global, .wide-backlinks-global) .markdown-source-view.is-readable-line-width,
    :is(.wide-table-global, .wide-dataview-global, .wide-callout-global, .wide-backlinks-global) .markdown-preview-view.is-readable-line-width,
    :is(.wide-table, .wide-dataview, .wide-callout, .wide-backlinks).markdown-source-view.is-readable-line-width,
    :is(.wide-table, .wide-dataview, .wide-callout, .wide-backlinks).markdown-preview-view.is-readable-line-width {
        container-name: content-view;
        container-type: inline-size;
    }



/* === Wide Blocks - Wide Table === */

    /* -- Mai.n Code - EV & RV -- */
    body {
        --wide-tbl-left-ev-adj: -4rem;
        --wide-tbl-min-left-ev: 0.5rem;
        --wide-tbl-width-ev: calc( var(--file-line-width) - var(--wide-tbl-left-ev-adj) );
    }
    body:has(.cm-gutters) {
        --wide-tbl-left-ev-adj: 1rem;
        --wide-tbl-min-left-ev: 6rem;
    }
    @container content-view (width > 50px) {
        /* editing view */
        :is(.wide-table-global, .wide-table) .cm-embed-block.cm-table-widget {
            width: calc(100cqi - 4rem);
            margin-left: calc( max( 100cqi - var(--wide-tbl-width-ev), var(--wide-tbl-min-left-ev) ) / 2 * -1 ) !important;
        }

        /* reading view */
        :is(.wide-table-global .markdown-preview-view, .wide-table.markdown-preview-view) div:has(> table) {
            width: 100cqi;
            margin-left: calc( max( 100cqi - var(--file-line-width), 1rem ) / 2 * -1 ) !important;
        }
        /* centering the table a bit */
        :is(.wide-table-global, .wide-table) .cm-embed-block.cm-table-widget table,
        :is(.wide-table-global .markdown-preview-view, .wide-table.markdown-preview-view) div > table
            { margin-inline: auto; }
    }


    /* -- Special adjustment for Community Themes */

        /* Minimal, complete re-write for the theme due to many !important used by the theme */
        body[class*="minimal-tab-title"] {
            --wide-tbl-left-adj: -4rem;
            --wide-tbl-width-adj: 2rem;
        }
        body[class*="minimal-tab-title"]:has(.cm-gutters) {
            --wide-tbl-left-adj: -4rem;
            --wide-tbl-width-adj: 0rem;
        }
        body[class*="minimal-tab-title"]:has(.cm-gutters).minimal-theme {
            --wide-tbl-left-adj: 0rem;
        }
        @container content-view (width > 50px) {
            body[class*="minimal-tab-title"][class*="wide-table-global"] .markdown-source-view .cm-contentContainer.cm-contentContainer .cm-embed-block.cm-table-widget,
            body[class*="minimal-tab-title"] .wide-table.markdown-source-view .cm-contentContainer.cm-contentContainer .cm-embed-block.cm-table-widget {
                width: calc(100cqi - 4rem) !important;
                max-width: 100%;
                margin-left: calc( var(--wide-tbl-left-adj) / 2 * -1 ) !important;
            }
            body[class*="minimal-tab-title"][class*="wide-table-global"] .markdown-preview-view .markdown-preview-sizer div:has(> table),
            body[class*="minimal-tab-title"] .wide-table.markdown-preview-view .markdown-preview-sizer div:has(> table) {
                width: calc(100cqi - 2rem - var(--wide-tbl-width-adj) ) !important;
                max-width: 100%;
                margin-left: calc( var(--wide-tbl-left-adj) / 2 * -1 ) !important;
            }
            /* centering the table a bit */
            body[class*="minimal-tab-title"][class*="wide-table-global"] .markdown-source-view .cm-contentContainer.cm-contentContainer .cm-embed-block.cm-table-widget table,
            body[class*="minimal-tab-title"] .wide-table.markdown-source-view .cm-contentContainer.cm-contentContainer .cm-embed-block.cm-table-widget table,
            body[class*="minimal-tab-title"][class*="wide-table-global"] .markdown-preview-view .markdown-preview-sizer div > table,
            body[class*="minimal-tab-title"] .wide-table.markdown-preview-view .markdown-preview-sizer div > table
                { margin-inline: auto; }
        }

        /* Catppuccin */
        body[class*="ctp-"].is-adj-rll:not([class*="anp-default"]) { --wide-tbl-left-ev-adj: -8rem; }



/* === Wide Blocks - Wide Dataview === */
    /* there are options to enable it (a) per page basis and (b) globally
       however, editing view is a hackaround */

    /* -- Main Code - EV & RV -- */
    body {
        --wide-dv-left-ev-adj: -4rem;
        --wide-dv-min-left-ev: 0.5rem;
        --wide-dv-width-ev: calc( var(--file-line-width) - var(--wide-dv-left-ev-adj) );
    }
    body:has(.cm-gutters) {
        --wide-dv-left-ev-adj: 1.7rem;
        --wide-dv-min-left-ev: 6.5rem;
    }
    @container content-view (width > 50px) {
        :is(.wide-dataview-global, .wide-dataview) .cm-preview-code-block:has(> .block-language-dataview),
        :is(.wide-dataview-global, .wide-dataview) .cm-preview-code-block:has(> .block-language-dataviewjs) {
            width: calc(100cqi - 4rem );
            margin-left: calc( max( 100cqi - var(--wide-dv-width-ev), var(--wide-dv-min-left-ev) ) / 2 * -1 ) !important;
        }
        :is(.wide-dataview-global, .wide-dataview) div:has(> .block-language-dataview),
        :is(.wide-dataview-global, .wide-dataview) div:has(> .block-language-dataviewjs) {
            width: 100cqi;
            margin-left: calc( max( 100cqi - var(--file-line-width), 1rem ) / 2 * -1 ) !important;
        }
    }


    /* -- Special adjustment for Community Themes */

        /* Minimal, complete re-write for the theme */
        body[class*="minimal-tab-title"] {
            --wide-dv-width-adj: 2rem;
        }
        body[class*="minimal-tab-title"]:has(.cm-gutters) {
            --wide-dv-left-ev-adj: -4rem;
            --wide-dv-width-adj: 0rem;
        }
        body[class*="minimal-tab-title"]:has(.cm-gutters).minimal-theme {
            --wide-dv-left-ev-adj: 0rem;
        }
        @container content-view (width > 50px) {
            body[class*="minimal-tab-title"][class*="wide-dataview-global"] .markdown-source-view .cm-contentContainer.cm-contentContainer .cm-content .cm-preview-code-block:has(> .block-language-dataview),
            body[class*="minimal-tab-title"] .wide-dataview.markdown-source-view .cm-contentContainer.cm-contentContainer .cm-content .cm-preview-code-block:has(> .block-language-dataview),
            body[class*="minimal-tab-title"][class*="wide-dataview-global"] .markdown-source-view .cm-contentContainer.cm-contentContainer .cm-content .cm-preview-code-block:has(> .block-language-dataviewjs),
            body[class*="minimal-tab-title"] .wide-dataview.markdown-source-view .cm-contentContainer.cm-contentContainer .cm-content .cm-preview-code-block:has(> .block-language-dataviewjs) {
                width: calc(100cqi - 4rem);
                max-width: 100%;
                margin-left: calc( var(--wide-dv-left-ev-adj) / 2 * -1 ) !important;
            }
            body[class*="minimal-tab-title"][class*="wide-dataview-global"] .markdown-preview-view div:has(> .block-language-dataview),
            body[class*="minimal-tab-title"] .wide-dataview.markdown-preview-view div:has(> .block-language-dataview),
            body[class*="minimal-tab-title"][class*="wide-dataview-global"] .markdown-preview-view div:has(> .block-language-dataviewjs),
            body[class*="minimal-tab-title"] .wide-dataview.markdown-preview-view div:has(> .block-language-dataviewjs) {
                width: calc(100cqi - 2rem - var(--wide-dv-width-adj) );
                max-width: 100%;
                margin-left: calc( var(--wide-dv-left-ev-adj) / 2 * -1 ) !important;
            }
            /* centering the table a bit */
            body[class*="minimal-tab-title"][class*="wide-dataview-global"] .markdown-source-view .cm-contentContainer.cm-contentContainer .cm-content table,
            body[class*="minimal-tab-title"] .wide-dataview.markdown-source-view .cm-contentContainer.cm-contentContainer .cm-content table,
            body[class*="minimal-tab-title"] .wide-dataview.markdown-preview-view .markdown-preview-sizer div > table {
                    width: calc( 100% );
                }
        }

        /* Catppuccin */
        body[class*="ctp-"].is-adj-rll:not([class*="anp-default"]) { --wide-dv-left-ev-adj: -8rem; }



/* === Wide Blocks - Wide Callout === */
    /* there are options to enable it (a) per page basis and (b) globally
       however, editing view is a hackaround
       !important needed because app's default uses it `.markdown-source-view.mod-cm6 .cm-content > *` */

    /* -- Main Code - EV & RV -- */
    body {
        --wide-co-left-ev-adj: -3.8rem;
        --wide-co-min-left-ev: 0.5rem;
        --wide-co-width-ev-adj: 4rem;
        --wide-co-width-ev: calc(var(--file-line-width) - var(--wide-co-left-ev-adj) );
    }
    body:has(.cm-gutters) {
        --wide-co-left-ev-adj: 1.7rem;
        --wide-co-min-left-ev: 6.5rem;
    }
    @container content-view (width > 50px) {
        :is(.wide-callout-global, .wide-callout) .cm-embed-block.cm-callout {
            width: calc( 100cqi - var(--wide-co-width-ev-adj) );
            margin-left: calc( max( 100cqi - var(--wide-co-width-ev), var(--wide-co-min-left-ev) ) / 2 * -1 ) !important;
        }
        :is(.wide-callout-global, .wide-callout) .markdown-preview-sizer > div:has(> .callout) {
            width: 100cqi;
            margin-left: calc( max( 100cqi - var(--file-line-width), 1rem ) / 2 * -1 ) !important;
        }
    }


    /* -- Special adjustment for Community Themes */

        /* Minimal, complete re-write for the theme */
        body[class*="minimal-tab-title"] { --folding-toggle: 1; }
        body.minimal-theme { --folding-toggle: 0; }
        body.minimal-theme:not(:has(.cm-gutters)) { --folding-toggle: 1; }
        @container content-view (width > 50px) {
            body[class*="minimal-tab-title"][class*="wide-callout-global"] .markdown-source-view .cm-contentContainer.cm-contentContainer .cm-content .cm-embed-block.cm-callout,
            body[class*="minimal-tab-title"] .wide-callout.markdown-source-view .cm-contentContainer.cm-contentContainer .cm-content .cm-embed-block.cm-callout {
                width: calc(100cqi - 4rem);
                max-width: 100%;
                margin-left: calc( var(--folding-offset) * var(--folding-toggle) ) !important;
            }
            body[class*="minimal-tab-title"][class*="wide-callout-global"] .markdown-preview-view .markdown-preview-sizer > div:has(> .callout),
            body[class*="minimal-tab-title"] .wide-callout.markdown-preview-view .markdown-preview-sizer > div:has(> .callout) {
                width: calc(100cqi - 2rem - 2rem * var(--folding-toggle) );
                max-width: calc(100% - 0rem);
                margin-left: calc( var(--folding-offset) * var(--folding-toggle) ) !important;
            }
        }

        /* AnuPpuccin */
        body[class*="anp-"] { --wide-co-width-ev-adj: 3.5rem; }

        /* Catppuccin */
        body[class*="ctp-"].is-adj-rll:not([class*="anp-default"]) { --wide-co-left-ev-adj: -7.8rem; }



/* === Wide Blocks - Wide Backlinks === */

    /* -- Main Code - EV & RV -- */
    body {
        --wide-bl-left-ev-adj: 4rem;
        --wide-bl-width-ev: calc(var(--file-line-width) + var(--wide-bl-left-ev-adj) );
    }
    @container content-view (width > 50px) {
        :is(.wide-backlinks-global .markdown-source-view, .wide-backlinks.markdown-source-view) .embedded-backlinks {
            width: calc(100cqi - 3.5rem);
            margin-left: calc( max( 100cqi - var(--wide-bl-width-ev), 1rem ) / 2 * -1 );
        }
        :is(.wide-backlinks-global .markdown-preview-view, .wide-backlinks.markdown-preview-view) .embedded-backlinks {
            width: calc(100cqi - 0rem);
            margin-left: calc( max( 100cqi - var(--file-line-width), 1rem ) / 2 * -1 );
        }
    }


    /* -- Special adjustment for Community Themes */

        /* Minimal, complete re-write for the theme */
        body[class*="minimal-tab-title"] {
            --wide-bl-width-adj: 4rem;
        }
        body[class*="minimal-tab-title"]:has(.cm-gutters) {
            --wide-bl-width-adj: 0rem;
        }
        @container content-view (width > 50px) {
            body[class*="minimal-tab-title"][class*="wide-backlinks-global"] .markdown-source-view .cm-sizer .embedded-backlinks,
            body[class*="minimal-tab-title"] .wide-backlinks.markdown-source-view .cm-sizer .embedded-backlinks {
                width: calc(100cqi - 4.5rem);
                max-width: unset;
                margin-left: calc( var(--wide-bl-width-adj) / 2 * 1 ) !important;
            }
            body[class*="minimal-tab-title"][class*="wide-backlinks-global"] .markdown-preview-view .embedded-backlinks,
            body[class*="minimal-tab-title"] .wide-backlinks.markdown-preview-view .embedded-backlinks {
                width: calc( 100cqi - 2rem - var(--wide-bl-width-adj)/2 );
                margin-left: calc( max( 100cqi - var(--line-width) - var(--wide-bl-width-adj) , 4rem ) / 2 * -1 ) !important;
            }
        }

        /* Catppuccin */
        body[class*="ctp-"].is-adj-rll:not([class*="anp-default"]) { --wide-bl-left-ev-adj: 13.5rem; }



/* @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
        description: Can use any unit e.g. px, em, ch
		type: variable-text
		default: 700px

    -
        id: wide-view-title
        title: Vault-wide toggle for Wide Blocks
		description: For wide -table/-dataview/-callout/-backlinks. RLL must be **enabled**
        type: heading
        level: 2
        collapsed: true
	-
		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

*/
