@use "../../mixins/wide";

body {
    --page-break-height-thin: 1.5em;
    --page-break-height-default: 3em;
    --page-break-height-large: 5em;
    --page-break-height-xlarge: 7em;
}

.callout[data-callout="page-break"][data-callout-metadata~="thin"] {
    --page-break-height: var(--page-break-height-thin);
}

.callout[data-callout="page-break"][data-callout-metadata~="large"] {
    --page-break-height: var(--page-break-height-large);
}

.callout[data-callout="page-break"][data-callout-metadata~="x-large"] {
    --page-break-height: var(--page-break-height-xlarge);
}

.callout[data-callout="page-break"] {
    --page-break-height: var(--page-break-height-default);
    --callout-blend-mode: normal;
    --callout-padding: 0;
    --callout-title-padding: 0;
    --callout-content-padding: 0 var(--size-4-3);

    min-height: var(--page-break-height);

    border-block: 1px rgb(var(--mono-rgb-0)) solid;
    border-inline: none;
    display: flex;

    > .callout-title {
        background: none;
        border: none;
        align-items: center;
    }

    > .callout-content {
        border: none;
        flex-grow: 1;

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            text-align: center;
        }
    }

    > * > .callout-icon,
    > * > .callout-title-inner {
        display: none;
    }
}

.callout[data-callout="page-break"]:not(.callout *) {
    background-color: var(--workspace-background, var(--background-secondary));
}

.markdown-preview-view .callout[data-callout="page-break"]:not(.callout *) {
    @include wide.wide(1);
}

.callout:not([data-callout="page-break"]) > .callout-content > .callout[data-callout="page-break"] {
    width: calc(100% + var(--size-4-6) + var(--size-4-3));
    margin-left: calc(-1 * var(--size-4-6));
    margin-right: calc(-1 * var(--size-4-3));
    background-color: var(--workleaves-background);
    border-block-color: rgba(var(--callout-color), var(--callout-border-opacity));

    &:is([data-callout-metadata~="overflow"] > * > *) {
        border-inline: var(--callout-border-width, 0px) solid var(--workleaves-background);
        box-sizing: content-box;
        margin-left: calc(-1 * var(--size-4-6) - var(--callout-border-width, 0px));
        margin-right: calc(-1 * var(--size-4-3) - var(--callout-border-width, 0px));
    }
}

.callout[data-callout="fas-infobox"] > .callout-content > .callout[data-callout="page-break"] {
    width: calc(100% + 2 * var(--callout-border-width, 0px));
    margin-left: calc(-1 * var(--callout-border-width, 0px));
    margin-right: calc(-1 * var(--callout-border-width, 0px));
}

@container style(--fas-callout-infobox) {
    .callout[data-callout="infobox"] > .callout-content > .callout[data-callout="page-break"] {
        width: calc(100% + 2 * var(--callout-border-width, 0px));
        margin-left: calc(-1 * var(--callout-border-width, 0px));
        margin-right: calc(-1 * var(--callout-border-width, 0px));
    }
}

.callout.callout[data-callout="pinned"] > .callout-content > .callout[data-callout="page-break"] {
    border-radius: 0;
    width: calc(100% + var(--size-4-6) + 3 * var(--size-4-3));

    margin-left: calc(-1 * var(--size-4-6) - var(--size-4-3));
    margin-right: calc(-2 * var(--size-4-3));
}

.callout.callout[data-callout="autopsy"] > .callout-content > .callout[data-callout="page-break"] {
    --callout-padding: 0;
    grid-column: 1 / -1;
}

.callout:not([data-callout="page-break"]) {
    &[data-callout="letter"] > .callout-content > .callout[data-callout="page-break"] {
        --callout-color: var(--color-yellow-rgb);
    }

    &[data-callout="autopsy"] > .callout-content > .callout[data-callout="page-break"] {
        --callout-color: var(--mono-rgb-0);
    }

    &[data-callout="quote"] > .callout-content > .callout[data-callout="page-break"],
    &[data-callout="cite"] > .callout-content > .callout[data-callout="page-break"],
    &[data-callout="fas-quote"] > .callout-content > .callout[data-callout="page-break"],
    &[data-callout="fas-cite"] > .callout-content > .callout[data-callout="page-break"] {
        --callout-color: var(--callout-quote);
    }

    &[data-callout="profile"] > .callout-content > .callout[data-callout="page-break"] {
        --callout-color: var(--color-gray-rgb);
    }

    &[data-callout="screen"] > .callout-content > .callout[data-callout="page-break"] {
        &:is(.theme-light *) {
            --callout-color: var(--callout-screen-color-light-rgb);
        }

        &:is(.theme-dark *) {
            --callout-color: var(--callout-screen-color-dark-rgb);
        }
    }

    &[data-callout-metadata~="gray"] > .callout-content > .callout[data-callout="page-break"] {
        --callout-color: var(--color-gray-rgb);
    }

    &[data-callout-metadata~="brown"] > .callout-content > .callout[data-callout="page-break"] {
        --callout-color: var(--color-brown-rgb);
    }

    &[data-callout-metadata~="red"] > .callout-content > .callout[data-callout="page-break"] {
        --callout-color: var(--color-red-rgb);
    }

    &[data-callout-metadata~="orange"] > .callout-content > .callout[data-callout="page-break"] {
        --callout-color: var(--color-orange-rgb);
    }

    &[data-callout-metadata~="yellow"] > .callout-content > .callout[data-callout="page-break"] {
        --callout-color: var(--color-yellow-rgb);
    }

    &[data-callout-metadata~="green"] > .callout-content > .callout[data-callout="page-break"] {
        --callout-color: var(--color-green-rgb);
    }

    &[data-callout-metadata~="cyan"] > .callout-content > .callout[data-callout="page-break"] {
        --callout-color: var(--color-cyan-rgb);
    }

    &[data-callout-metadata~="blue"] > .callout-content > .callout[data-callout="page-break"] {
        --callout-color: var(--color-blue-rgb);
    }

    &[data-callout-metadata~="cyan"] > .callout-content > .callout[data-callout="page-break"] {
        --callout-color: var(--color-cyan-rgb);
    }

    &[data-callout-metadata~="purple"] > .callout-content > .callout[data-callout="page-break"] {
        --callout-color: var(--color-purple-rgb);
    }

    &[data-callout-metadata~="pink"] > .callout-content > .callout[data-callout="page-break"] {
        --callout-color: var(--color-pink-rgb);
    }

    &[data-callout-metadata~="black"] > .callout-content > .callout[data-callout="page-break"] {
        --callout-color: 0, 0, 0;
    }

    &[data-callout-metadata~="white"] > .callout-content > .callout[data-callout="page-break"] {
        --callout-color: 255, 255, 255;
    }

    &[data-callout-metadata~="accent"] > .callout-content > .callout[data-callout="page-break"] {
        border-block-color: hsl(var(--accent-h) var(--accent-s) var(--accent-l) / var(--callout-border-opacity));
    }
}

@media print {
    .print .callout[data-callout="page-break"] {
        max-height: 0 !important;
        visibility: hidden;
        break-after: page;
    }
}
