/*
 * The same five live decorations used by the original editor. Keep these
 * root-relative, outside ui_asset()/the preview mount: replacing a shared PNG
 * must update this editor too, on whichever language domain serves the page.
 * These are separate, nonrepeating images, not a stretched or tiled frame.
 */
@media screen {
    .paint-editor .paint-editor__viewport {
        --paint-frame-space: clamp(28px, 5vw, 60px);
        padding: calc(var(--paint-frame-space) + var(--space-2));
        /* Preserve the previous drawable height, with room for the decorations. */
        max-block-size: calc(min(72vh, 800px) + 2 * var(--paint-frame-space));
    }

    .paint-editor .paint-editor__sheet {
        /* Keep decoration behind the opaque canvas and its cursor/feedback. */
        isolation: isolate;
    }

    .paint-editor .paint-editor__sheet::before {
        content: "";
        position: absolute;
        inset: calc(-1 * var(--paint-frame-space));
        z-index: -1;
        pointer-events: none;
        background-image:
            url("/imatjes/borders/top_left_corner.png"),
            url("/imatjes/borders/top_border.png"),
            url("/imatjes/borders/bottom_border.png"),
            url("/imatjes/borders/left_border.png"),
            url("/imatjes/borders/right_border.png");
        background-repeat: no-repeat;
        background-position: left top, center top, center bottom, left center, right center;
        /* One automatic dimension preserves each PNG's natural proportions.
         * Caps keep the centered edges away from corners on small/short sheets.
         * The gutter stays fixed while the sheet grows during zoom/pan.
         */
        background-size:
            var(--paint-frame-space) auto,
            min(378px, calc(100% - 2 * var(--paint-frame-space)), calc(8 * var(--paint-frame-space))) auto,
            min(380px, calc(100% - 2 * var(--paint-frame-space)), calc(8 * var(--paint-frame-space))) auto,
            auto min(353px, calc(100% - 2 * var(--paint-frame-space)), calc(6 * var(--paint-frame-space))),
            auto min(347px, calc(100% - 2 * var(--paint-frame-space)), calc(6 * var(--paint-frame-space)));
    }
}

/* Decorations never enter the canvas bitmap, download or editor print image. */
@media print, (forced-colors: active) {
    .paint-editor .paint-editor__sheet::before {
        content: none;
        display: none;
    }
}