/**
 * Styling for the main element, including a .page-break element
 */
@import "variables";
@import "media";

/* Defines a class for manual page breaks via inserted .page-break element */
div.page-break {
  border: none;
  margin: 0;
  display: none;

  page-break-after: always;

  @media #{$large-screen-only} {
    border-bottom: 1px dashed $divider-color;
    margin: 1cm -2cm;
  }
}

/* Use CSS Paged Media to switch from continuous documents to sheet-like documents with separate pages */
@page {
  /* You can only change the size, margins, orphans, widows and page breaks here */
  /* Paper size and page orientation */
  size: $page-size portrait;

  /* Margin per single side of the page */
  /* only works if you set Margin to Default in the print dialog */
  margin: 1.5cm 1.5cm;

  /* Require that at least this many lines of a paragraph must be left at the bottom of a page */
  //orphans: 4;

  /* Require that at least this many lines of a paragraph must be left at the top of a new page */
  //widows: 2;
}

html, body {
  background-color: white;

  @media #{$large-screen-only} {
    /* Use a non-white background color to make the content areas stick out from the full page box */
    background-color: $background-color;
  }
}

main {
  // on small screen, show plain layout
  @media #{$small-screen-only} {
    background: white;
    margin: 20px;
  }

  // on large screen, display A4 size + padding left and right
  @media #{$large-screen-only} {
    /* Divide single pages with some space and center all pages horizontally */
    margin: 1cm auto;
    /* Define a white paper background that sticks out from the darker overall background */
    background: #fff;
    /* Show a drop shadow beneath each page */
    box-shadow: 0 4px 5px rgba(75, 75, 75, 0.2);

    /* Reflect the paper width in the screen rendering (must match size from @page rule) */
    width: $page-width;
    /* Reflect the paper height in the screen rendering (must match size from @page rule) */
    min-height: $page-height;

    /* Margin per single side of the page */
    padding: 2cm;
  }

  @media #{$print-only} {
    /* Reset all page styles that have been for better screen appearance only */
    /* Break cascading by using the !important rule */
    /* These resets are absolute must-haves for the print styles and the specificity may be higher elsewhere */
    width: initial !important;
    min-height: initial !important;
    margin: 0 !important;
    padding: 0 !important;
    border: initial !important;
    border-radius: initial !important;
    background: initial !important;
    box-shadow: initial !important;

    /* Force page breaks after each .page element of the document */
    page-break-after: always;
  }
}

