/* see https://voussoir.net/writing/css_for_printing/#page */
@page {
  size: Letter portrait;
  margin: 0;
}

@media print {
  html {
    /* Rescale the page so the printed paper matches the size of actual music box paper. It works
       for all music box types as long as the hole width is 12px. Setting the scale on the `html`
       element ensures there isn't any extra white space at the end in Firefox and Safari (we still
       see extra white space at the end in Chrome and Edge). I tried using the `zoom` property
       (instead of scale) because it doesn't produce extra white space) but it was causing the holes
       to shift off the grid. The magic number (0.63) was identified from manual testing. It's a little
       big on Safari but perfect on Edge, Chrome, and Firefox. */
    transform: scale(0.63);
    transform-origin: top center;

    /* For some reason, this eliminates the blank first page that was appearing in Chrome. */
    height: 0;
  }

  body {
    background: var(--mb-white);
  }

  [class^="box-type-"] {
    /* Use a 12px hole width for all music box types. This results in grid dimensions that
       are most similar to the actual music box paper. */
    --hole-width: 12px;
  }

  /* Hide elements that don't need to be printed */
  .left-sidebar,
  .right-sidebar,
  .music-box,
  .dividers,
  .nav-icon,
  .controls-icon,
  .audio-disabled-message,
  .share-box,
  .floating-actions,
  .off-canvas-overlay,
  .back-to-top-observed,
  .selection {
    display: none;
  }

  /* Optimize layout for printing */
  .greater-workspace {
    margin-left: 0;
    margin-right: 0;
  }

  .paper {
    /* Better borders */
    box-shadow: none;
    border: 1px solid var(--mb-black);

    /* Force background images and colors to print. This overrides the print
       dialog option "Print backgrounds" (which often defaults to disabled). */
    -webkit-print-color-adjust: exact !important;
    color-adjust: exact !important;

    /* Removes some trailing whitespace. */
    margin-bottom: 4rem;
  }

  .paper::after {
    content: "For best results, print using Edge, Chrome, or Firefox. \A Note positions may shift when printing with Safari.";
    position: absolute;
    bottom: -50px;
    left: 0;
    right: 0;
    font-size: 10px;
    white-space: pre;
    text-align: center;
}

  /* Prevent potential border overlap */
  .extend-song-button {
    width: 98%;
  }

  /* Disable sticky headers and prevent border overlap */
  .pitch-header {
    position: initial;
    background: transparent;
  }
}
