.callout[data-callout="comic"] {
    --p-spacing: 0;
    --gutter: 20px;
    --strip-height: 200px;
    --image-shadow-offset: 0;

    --comic-color-rgb: 0, 0, 0; // Color of the lines, text, etc. (black)
    --comic-background-rgb: 255, 255, 255; // background of the whole comic (white)

    --callout-radius: 0;
    --callout-content-padding: var(--size-4-4);
    --callout-blend-mode: normal;
    --callout-color: var(--comic-color-rgb);
    --callout-border-width: 1px;

    --border-radius-0: 81% 3% 0px 0px / 3% 94% 0px 0px;
    --border-radius-1: 100% 4% 0px 0px / 6% 82% 0px 0px;
    --border-radius-2: 100% 3% 0px 0px / 3% 49% 0px 0px;
    --border-radius-3: 4% 30% 0px 0px / 51% 3% 0px 0px;

    background: rgb(var(--comic-background-rgb));

    &:not([data-callout-metadata~="default-font"]) {
        font-family: "VTC Letterer Pro", "Comic Sans", "Arial", sans-serif;
    }
}

.callout[data-callout="comic"] .callout-content {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--gutter);
}

.callout[data-callout="comic-panel"] {
    --callout-color: var(--comic-color-rgb);
    --callout-padding: 0;
    background: rgb(var(--comic-background-rgb));
    margin: 0;
    position: relative;
    border: none;
    max-height: var(--strip-height);

    > .callout-title {
        display: none;
    }
    > .callout-content {
        border: none;
        padding: 0;
    }
    > .callout-content > p {
        position: absolute;
        color: rgb(var(--comic-color-rgb));
        background-color: rgb(var(--comic-background-rgb));
        border-top: 1px solid rgb(var(--comic-color-rgb));
        left: 0;
        right: 0;
        bottom: 0;
        text-align: center;
    }
    blockquote {
        border-inline-start: 0;
        padding: 0;
        margin: 0;
    }
    .image-embed {
        font-size: 0;
        max-height: var(--strip-height);
    }
    img {
        height: var(--strip-height);
        object-fit: cover;
        border-radius: 0;
    }
    p {
        margin: 0;
    }
}

.callout[data-callout="comic-panel"][data-callout-metadata~="bubble"] {
    > .callout-content > p {
        border-radius: 17px;
        --g: 4px; // gap with the boundaries
        --s: 1px; // hard shadow size
        padding: 3px;
        width: 100px;
        margin: auto;
        height: fit-content;
        max-width: calc(100% - var(--g) * 2 - var(--s));
        right: calc(var(--g) + var(--s));
        top: var(--g);
        bottom: calc(var(--g) + var(--s));
        left: var(--g);
        border: 1px solid rgb(var(--comic-color-rgb));
        box-shadow: 1px 1px 0px 1px #000000;
    }

    &[data-callout-metadata~="top"] > .callout-content > p {
        bottom: unset;
    }
    &[data-callout-metadata~="bottom"] > .callout-content > p {
        top: unset;
    }
    &[data-callout-metadata~="left"] > .callout-content > p {
        right: unset;
    }
    &[data-callout-metadata~="right"] > .callout-content > p {
        left: unset;
    }

    &:is(
            [data-callout-metadata~="top"],
            [data-callout-metadata~="bottom"],
            [data-callout-metadata~="left"],
            [data-callout-metadata~="right"]
        ) {
        float: none;
        margin: 0;
    }
}

.callout[data-callout="comic-panel"][data-callout-metadata~="overflow"] {
    --g: 3px; // small gap to avoid touching other panels
    --b: 5px; // border-width
    &,
    .callout-content {
        overflow: visible;
    }
    .callout-content {
        max-height: calc(var(--strip-height) - var(--b));
    }
    img {
        margin-top: calc(var(--g) - var(--gutter) - var(--b));
        height: calc(var(--strip-height) + var(--gutter) - var(--g) - var(--b));
        object-fit: contain;
    }
}

.callout[data-callout="comic"]:not([data-callout-metadata="straight"]) > .callout-content {
    > * {
        border-image-slice: 27 27 27 27;
        border-image-width: 20px 20px 20px 20px;
        border-image-outset: 2px;
        border-image-repeat: stretch stretch;
        border-style: solid;
    }
    > *:nth-child(6n) {
        border-image-source: var(--border-pannel-0-source);
    }
    > *:nth-child(6n + 1) {
        border-image-source: var(--border-pannel-1-source);
    }
    > *:nth-child(6n + 2) {
        border-image-source: var(--border-pannel-2-source);
    }
    > *:nth-child(6n + 3) {
        border-image-source: var(--border-pannel-3-source);
    }
    > *:nth-child(6n + 4) {
        border-image-source: var(--border-pannel-4-source);
    }
    > *:nth-child(6n + 5) {
        border-image-source: var(--border-pannel-5-source);
    }

    > .callout[data-callout-metadata~="overflow"] {
        border-image: none;
        border: var(--b) solid rgb(var(--comic-color-rgb));
    }
    > .callout[data-callout-metadata~="overflow"]:nth-child(4n) {
        border-radius: var(--border-radius-0);
    }
    > .callout[data-callout-metadata~="overflow"]:nth-child(4n + 1) {
        border-radius: var(--border-radius-1);
    }
    > .callout[data-callout-metadata~="overflow"]:nth-child(4n + 2) {
        border-radius: var(--border-radius-2);
    }
    > .callout[data-callout-metadata~="overflow"]:nth-child(4n + 3) {
        border-radius: var(--border-radius-3);
    }
}

.callout[data-callout="comic"][data-callout-metadata="straight"] > .callout-content > * {
    border: 5px solid rgb(var(--comic-color-rgb));
}

@media print {
    .print .markdown-preview-view [data-callout="comic"] > .callout-content {
        display: flex !important;
    }
}

body {
    --border-pannel-0-source: url("data:image/svg+xml,%3Csvg width='70.775017mm' height='70.522331mm' viewBox='0 0 70.775016 70.522331' fill='currentColor' stroke='%23000000' stroke-width='1.56305' stroke-linecap='round' stroke-linejoin='round' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cg transform='translate(-191.30635,-104.53226)'%3E%3Cpath d='m 261.29984,174.27306 c -7.66171,-0.15689 -15.27484,-0.33254 -22.8088,-0.51089 -14.61569,-0.34599 -29.88558,-0.29864 -45.35317,-0.12316 -0.25001,-14.75636 -0.69039,-29.38934 -0.88975,-44.14959 -0.10852,-8.03444 -0.15403,-16.09965 -0.16025,-24.17564 18.24165,0.11244 49.95933,1.02554 68.32887,1.25577 0.42901,22.52271 0.37113,45.85263 0.8831,67.70351 z' /%3E%3C/g%3E%3C/svg%3E%0A");
    --border-pannel-1-source: url("data:image/svg+xml,%3Csvg width='75.701805mm' height='71.086418mm' viewBox='0 0 75.701805 71.086418' fill='currentColor' stroke='%23000000' stroke-width='1.56305' stroke-linecap='round' stroke-linejoin='round' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cg transform='translate(-9.1744686,-10.268627)'%3E%3Cpath d='m 84.005784,11.829927 c 0.03228,15.861547 0.156829,31.747972 0.03986,47.355422 -0.05228,6.969791 -0.150303,14.009847 -0.302889,21.095533 -23.51781,-0.101818 -47.606341,0.273831 -72.561375,0.292557 -0.0329,2.3e-5 -0.0658,4.6e-5 -0.0988,7.8e-5 -1.9256303,-23.036075 -0.91598,-46.161469 -0.3644,-69.34338 7.22523,-0.039 14.40754,-0.0832 21.449641,-0.13185 11.176513,-0.0772 9.469824,0.0834 22.084919,-0.0328 12.615094,-0.11622 17.900836,0.45657 29.753001,0.76441 z' /%3E%3C/g%3E%3C/svg%3E%0A");
    --border-pannel-2-source: url("data:image/svg+xml,%3Csvg width='72.383308mm' height='70.322052mm' viewBox='0 0 72.383308 70.322052' fill='none' stroke='%23000000' stroke-width='1.56305' stroke-linecap='round' stroke-linejoin='round' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cg transform='translate(-95.755327,-15.835668)'%3E%3Cpath d='m 166.87027,17.150676 c 0.2946,17.042268 -0.35341,34.863448 0.18059,51.479452 0.17509,5.447873 0.27091,10.983831 0.30625,16.581668 -22.91148,-0.383332 -46.81513,0.248393 -70.464245,0.154797 -0.0359,-1.399942 -0.071,-2.802541 -0.10479,-4.208172 -0.52535,-21.836649 -0.13753,-43.260049 0.34857,-64.541229 8.671395,0.148446 11.349665,0.11699 26.010465,0.49448 14.6608,0.37749 18.17202,0.251665 43.72316,0.039 z' /%3E%3C/g%3E%3C/svg%3E%0A");
    --border-pannel-3-source: url("data:image/svg+xml,%3Csvg width='70.64547mm' height='71.648544mm' viewBox='0 0 70.645469 71.648544' fill='currentColor' stroke='%23000000' stroke-width='1.56305' stroke-linecap='round' stroke-linejoin='round' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cg transform='translate(-194.08701,-25.923019)'%3E%3Cpath d='m 263.95113,27.23743 c -0.36491,17.031137 -0.11425,33.876184 -0.0124,51.228327 0.0361,6.153231 -0.4222,12.253019 -0.45604,18.324282 -23.1825,-0.106881 -46.69986,0.615432 -68.7027,-0.171402 0.045,-1.020932 0.1779,-3.369666 0.22158,-4.391239 0.97524,-22.83483 0.47666,-44.264361 0.0725,-65.522857 7.92614,0.295944 15.86286,1.111081 23.89313,0.896068 10.12384,-0.27107 20.55613,-0.338237 18.24922,-0.350788 -2.30691,-0.01255 13.83474,-0.07155 26.7347,-0.0124 z' /%3E%3C/g%3E%3C/svg%3E%0A");
    --border-pannel-4-source: url("data:image/svg+xml,%3Csvg width='73.131813mm' height='73.335487mm' viewBox='0 0 73.131812 73.335487' fill='currentColor' stroke='%23000000' stroke-width='1.56305' stroke-linecap='round' stroke-linejoin='round' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cg transform='translate(-14.931276,-101.37309)'%3E%3Cpath d='m 86.447964,173.82132 c -23.34815,-0.0101 -46.97959,-0.83072 -70.46025,0.004 -0.0546,-2.85021 -0.181042,-5.69632 -0.18749,-8.54192 -0.04367,-19.27019 -0.0751,-41.25612 0.753232,-62.27068 10.45798,-0.45875 21.087668,0.23937 31.631758,-0.25645 13.65838,-0.64227 26.5653,-0.60165 39.0828,-0.23697 0.49191,19.56608 -0.75398,38.14586 -0.70582,45.90212 0.0482,7.75627 -0.0617,21.27484 -0.11423,25.39999 z' /%3E%3C/g%3E%3C/svg%3E%0A");
    --border-pannel-5-source: url("data:image/svg+xml,%3Csvg width='73.545616mm' height='71.283852mm' viewBox='0 0 73.545615 71.283851' fill='none' stroke='%23000000' stroke-width='1.56305' stroke-linecap='round' stroke-linejoin='round' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cg transform='translate(-99.656525,-101.94349)'%3E%3Cpath d='m 172.42062,103.61183 c -0.1921,19.03997 -0.0609,37.77398 -0.59574,56.68899 -0.111,3.92581 -0.0141,7.94385 -0.0859,11.86677 -23.47263,-0.2306 -47.30762,0.29246 -70.78568,-0.473 -0.0574,-3.22796 0.15298,-7.02071 0.0718,-10.26626 -0.51779,-20.70434 -0.48731,-39.93321 -0.58706,-58.70332 10.1599,0.59443 19.29693,0.55221 29.32155,0.57526 8.40959,0.0194 18.33381,-0.0817 21.4592,-0.16822 3.12539,-0.0865 10.26625,0.5099 21.20182,0.47978 z' /%3E%3C/g%3E%3C/svg%3E%0A");
}
