/**
 * This file is part of HTML2print.
 *
 * HTML2print is free software: you can redistribute it and/or modify it under the
 * terms of the GNU Affero General Public License as published by the Free
 * Software Foundation, either version 3 of the License, or (at your option) any
 * later version.
 *
 * HTML2print is distributed in the hope that it will be useful, but WITHOUT ANY
 * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A
 * PARTICULAR PURPOSE.  See the GNU Affero General Public License for more
 * details.
 *
 * You should have received a copy of the GNU Affero General Public License along
 * with HTML2print.  If not, see <http://www.gnu.org/licenses/>.
 */


/**
 * Computation
 */

:root {
    /* the geometry of the page */
    --page-width: 148.5mm;
    --page-height: 210mm;
}


/**
 * DEFINITION OF THE PAPER SHEET
 */

/**
 * The @page CSS at-rule is used to define some properties of printed
 * documents. We make it the size of the elements with the .page class and
 * remove any margins.
 */
@page  {
    /*
     * 1. we would have liked to use
     *        `size: var(--page-width) var(--page-height);`
     *    but the page it does not work with css variables it seems.
     * 2. the 1pt addition is to fix a rounding bug that makes the content
     *    overflow
     */
    --page-width: 148.5mm;
    --page-height: 222mm;

    margin: 0;
    /* size: 148.5mm calc(210mm + 1pt); [> [1] [2] <] */
    size: var(--page-width) var (--page-height);
}


/**
 * CANVAS
 */

@media all {
    /* 1. allows for absolutely positioned elements as settings the position */
    /*    property to relative as the side effect of making this elements */
    /*    top-left corner the reference point  */
    /* 2. defines the page size */
    body { margin: 0; }

    .page {
        position: relative; /* [1] */

        width: var(--page-width); /* [2] */
        height: var(--page-height); /* [2] */
    }
}

@media screen {
    /* 1. defines the background color of the workspace */
    /* 2. makes the page centered on screen */
    body { background-color: #f0f0f0; }

    #pages {
        width: var(--page-width); /* [1] */
        height: var(--page-height); /* [1] */
        margin-right: auto; /* [2] */
        margin-left: auto; /* [2] */
    }

    .page {
        margin-top: 1em;
        margin-bottom: 1em;

        background-color: white;
    }
}

@media print {
    /* 1. allows for background colors printing */
    html { width: var(--page-width); }

    body {
        background-color: transparent; /* [1] */
        -webkit-print-color-adjust: exact; /* [1] */
                print-color-adjust: exact; /* [1] */
    }
}