// these styles will override the default print stylesheet that is supplied with the theme
// this file also includes styles that are specific to the PDF Creator preview and final print

.ez5-field-row,
.ez5-field-block {
  margin: 3px 0;
}

.fields-renderer-plain {
  .ez5-field-block-header {
    width: 100%;
  }
  .ez5-field-block-content {
    .cui-horizontal-layout-right > .cui-buttonbar {
      display: none;
    }
  }
}

.pdf-print {
  body {
    margin: 0;
  }

  .pdf-node {
    &-field {
      .ez5-field-block {
        display: block;
      }

      &.hide-labels {
        .ez5-field-block-header {
          display: none;
        }
      }

      &.row-format {
        .ez5-field-block {
          display: flex;
          // in the final print the margins will be collapsed, so we use padding instead
          margin: 0;
          padding: 8px 0; // see .ez5-field-block-content > .ez5-nested--has-groups 
          
          &-header {
            width: auto;
          }
        }

        .ez5-field-block-content > .ez5-nested--has-groups {
          margin: -8px 0; // see .pdf-print .pdf-node-field.row-format .ez5-field-block
        }
      }
    }

    &-asset {
      &-show-info {
        .ez5-asset-element {
          .ez5-asset-info {
            display: block;
          }
        }
      }

      &-placeholder {
        text-align: center;
        padding: 1cm;

        span {
          margin-top: 1mm;
          display: block;
        }
        i {
          font-size: 10mm;
          margin: 0;
        }
      }

      .ez-asset-browser-assets {
        .ez-asset {
          display: inline-block;

          .eas-image {
            img {
              width: 100%;
              height: auto;
            }

            &.portrait img {
              height: 100%;
              width: auto;
            }
          }
        }

        .ez-asset-info-container {
          display: none;
        }
      }

      .ez-asset-browser-multiple {
        display: none;
      }
    }

    &-eas {
      display: inline-block;

      .ez5-asset-element {
        img {
          width: 100%
        }
      }
    }

    &-document {
      &.outer-border {
        outline: 1px solid #8e8d8d;
      }
      .pdf-break-page {
        @media print {
          break-after: page;
        }
      }
    }

    &-body {
      &-grid {
        height: 100%;
        box-sizing: border-box;
      }

      &-row {
        overflow: hidden;
        display: flex;
        box-sizing: border-box;

        &:last-child {
          border-bottom-width: 0!important; // The !important is necessary because we modify the row with inline styles.
        }

        &.inner-border {
          border-bottom: 1px solid #8e8d8d;
        }
      }

      &-column {
        box-sizing: border-box;
        display: flex; // Enforce the 100% height of the child - makes the overflow hidden work in print.

        &-inner {
          overflow: hidden;
          height: 100%;
          width: 100%;
          position: relative;
        }

        &:last-child {
          border-right-width: 0!important; // The !important is necessary because we modify the column with inline styles.
        }

        &.inner-border {
          border-right: 1px solid #8e8d8d;
        }
      }
    }

    // Specific measures to simulates the print.
    // ! preview only
    // ! won't be applied in the final HTML->PDF print process
    /* todo: 
      - until we know how the PDF printer works and how it can be configured to render the header/footer, 
        we should keep the preview as close to the final PDF as possible (omit all styles that won't be applied anyways)
    */
    &-header,
    &-footer {
      width: 100%;
      font-size: 12px;
      line-height: 12px;
    }
    &-header {
      // Logo
      &-image-left,
      &-image-right {
        img {
          height: 31px;
        }
      }
    }

    &-footer {
      bottom: 0;
      margin-bottom: 0.57cm;
    }
  }

  // Preview
  &-preview {
    overflow: hidden;

    &-body {
      .pdf-node {
        border: 1px dashed #bbbbbb;

        &-selected {
          border: 1px dashed #f5e441;
        }
      }

      &.outer-border {
        outline: 1px solid #8e8d8d;
      }

      outline: 1px dashed #8e8d8d;
      height: 100%;
      overflow: hidden;
      overflow-y: auto;
    }

    .pdf-node {
      &-body {
        &-row {
          border-bottom: 1px dashed #8e8d8d;
        }

        &-column {
          border-right: 1px dashed #8e8d8d;
        }
      }
    }
  }

  .cui-label-multiline > .cui-label-content {
    white-space: pre-wrap;
  }

}


// Extra classes for specific styles

// Measurements
// Displays measurement values seperated by a "x" (times) character in a row, e.g. 60 x 90
.pdf-node-field.measurements {
  display: flex;
  gap: 0.25rem;
  
  > .ez5-field-block {
    display: inline-flex;
    gap: 0.25rem;
    
    &:not(:last-child)::after {
      content: 'x';
    }
  }
}