/* Stickynote in Callout-style using Sidenote-Auto-Adjust-Module.css */
/* author: cerenkov */
/* Stickynote in Callout-style CSS snippet works on its own, but by enabling Sidenote-Auto-Adjust-Module.css, it unleashes its full potential of auto-width and positioning features */
/*
  This CSS snippet provides two syntaxes for generating Callout-style stickynotes:
    * simple stickynote fashion
        > [!stickynote]
        > text here
    * full callout fashion
        > [!info|aside]
        > text here
  Inspired by https://github.com/r-u-s-h-i-k-e-s-h/Obsidian-CSS-Snippets/blob/Collection/Snippets/Sidenote%20callout%2002.md https://github.com/r-u-s-h-i-k-e-s-h/Obsidian-CSS-Snippets/blob/Collection/Snippets/Sidenote%20callout%2001.md https://github.com/xhuajin/obsidian-sidenote-callout
  Both syntaxes use callout hacks to generate normal-fontsize background-colored nice-looking stickynotes in both Live Preview mode and Reading mode.
  The simple fashion has its callout-title hidden and is more compact in line spacings, while the full fashion allows all callout types and features:
        > [!stickynote]
        > $^1$ See [[Author]], _Book Name_.
        (empty line)
        May the force be with you<sup>[1]</sup>

        > [!warning|aside]- Title: Folded note, click to unfold
        > This is simply a warning
        > - list item 1
        > - list item 2
  There are auto-width and positioning features when the Sidenote Auto-Adjust Module is enabled. Check the module for documentations.
  Each syntax have three variants for right, left and default:
    * >[!stickynote-r]  >[!stickynote-l]  >[!stickynote]
    * >[!xxxx|aside-r]  >[!xxxx|aside-l]  >[!xxxx|aside]
  where the default position is determined by the variable --sidenote-default-position,
  except that the Sidenote Auto-Adjust Module (when enabled) will override it, and switch left/right automatically depending on the document is rightsided/leftsided.
*/

/* styling part */

/* [!stickynote] callouts: strip away title and spacing and the edit button, keep background and paddings */
/* [!info|aside] callouts: keep all callout features, only hide the edit button */
/* Tufte-style means smaller font-size, minimal margins and paddings, whereas Callout-style inherits normal font-size and broader paddings */
.markdown-preview-view, .markdown-source-view {
    .callout[data-callout|="stickynote"] {
        .callout-title {
            display: none;
        }
        --p-spacing: 0;
        margin-block: 0;
    }
    .cm-callout:has(
        .callout[data-callout|="stickynote"],
        .callout[data-callout-metadata~="aside"], .callout[data-callout-metadata~="aside-r"], .callout[data-callout-metadata~="aside-l"]
    ) > .edit-block-button {
        display: none;
    }
}
/* need higher specificity to override obsidian app's !important property */
.markdown-source-view.mod-cm6 .cm-content > .cm-callout[contenteditable=false]:has(
    .callout[data-callout|="stickynote"],
    .callout[data-callout-metadata~="aside"], .callout[data-callout-metadata~="aside-r"], .callout[data-callout-metadata~="aside-l"]
) {
    overflow: visible;
    contain: none !important;
}
/* extra shift in Live Preview mode due to callouts syntax requiring an extra empty line */
.markdown-source-view {
    .callout[data-callout|="stickynote"],
    .callout[data-callout-metadata~="aside"], .callout[data-callout-metadata~="aside-r"], .callout[data-callout-metadata~="aside-l"] {
        margin-top: 2.1em;
    }
}

/* positioning part */

.markdown-preview-view, .markdown-source-view {
    .callout[data-callout="stickynote-r"], .callout[data-callout-metadata~="aside-r"] {
        position: relative;
        float: right;
        clear: right;
        @container not style(--sidenote-edgeout) {
            width: var(--sidenote-width);
            margin-inline: var(--sidenote-margins-r-non-intrusive);
        }
        @container style(--sidenote-edgeout) {
            max-width: var(--sidenote-width);
            margin-inline: var(--sidenote-margins-r-intrusive);
        }
    }

    .callout[data-callout="stickynote-l"], .callout[data-callout-metadata~="aside-l"] {
        position: relative;
        float: left;
        clear: left;
        @container not style(--sidenote-edgeout) {
            width: var(--sidenote-width);
            margin-inline: var(--sidenote-margins-l-non-intrusive);
        }
        @container style(--sidenote-edgeout) {
            max-width: var(--sidenote-width);
            margin-inline: var(--sidenote-margins-l-intrusive);
        }
    }

    .callout[data-callout="stickynote"], .callout[data-callout-metadata~="aside"] {
        position: relative;
        float: var(--sidenote-default-position);
        clear: var(--sidenote-default-position);
        @container not style(--sidenote-edgeout) {
            width: var(--sidenote-width);
            @container style(--sidenote-default-position: right) {
                margin-inline: var(--sidenote-margins-r-non-intrusive);
            }
            @container style(--sidenote-default-position: left) {
                margin-inline: var(--sidenote-margins-l-non-intrusive);
            }
        }
        @container style(--sidenote-edgeout) {
            max-width: var(--sidenote-width);
            @container style(--sidenote-default-position: right) {
                margin-inline: var(--sidenote-margins-r-intrusive);
            }
            @container style(--sidenote-default-position: left) {
                margin-inline: var(--sidenote-margins-l-intrusive);
            }
        }
    }
}

/* fallback values part (when not working with the Sidenote Auto-Adjust Module) */
/* these lines can be deleted if it's assured to be working with the Sidenote Auto-Adjust Module */
:root {
    --sidenote-default-position: right;
    --sidenote-width: 15rem;
    --sidenote-margin: 1rem;
    --sidenote-edgeout: unset;
    --sidenote-margins-r-non-intrusive: var(--sidenote-margin)  calc(-1 * var(--sidenote-width) - var(--sidenote-margin));
    --sidenote-margins-r-intrusive: var(--sidenote-margin)  var(--sidenote-edgeout);
    --sidenote-margins-l-non-intrusive: calc(-1 * var(--sidenote-width) - var(--sidenote-margin))  var(--sidenote-margin);
    --sidenote-margins-l-intrusive: var(--sidenote-edgeout)  calc(var(--sidenote-margin) + 1rem);
    /* when sidenote position is left, margin-right has to be larger to avoid overlap with main text bullet points */
}
