@import '../../assets/style/colors.scss';

:host {
  --page-margin: 1px auto -8px;
  --page-border: 9px solid transparent;
  --highlight-color: var(--litpdf-highlight-color, rgb(255 247 0 / 0.4));

  // Fill the space the host is given and lay the toolbar + scroll area out as
  // a column. The consumer is responsible for sizing the host (e.g. height).
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;

  // Excludes nested custom elements (lit-pdf-toolbar, lit-pdf-pagination,
  // lit-pdf-thumbnails, lit-pdf-search, lit-pdf-error): their own `:host`
  // padding/margin has the same specificity as this selector, so without the
  // exclusion this reset unpredictably wins the cascade and silently zeroes
  // out their internal spacing.
  *:not(lit-pdf-toolbar):not(lit-pdf-pagination):not(lit-pdf-thumbnails):not(lit-pdf-search):not(
      lit-pdf-error
    ) {
    padding: 0;
    margin: 0;
  }

  header {
    position: relative;
    flex: 0 0 auto;
  }

  section {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-size: 2rem;
  }

  // Lays the thumbnails sidebar and the viewer side by side, filling the
  // space between the toolbar and the bottom of the host. Allow it to shrink
  // below its content (min-height: 0) so its children — not this row — end up
  // scrolling.
  .contentWrapper {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
  }

  .viewerWrapper {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
  }

  // pdf.js requires its scroll container to be absolutely positioned; here it
  // fills the (relatively positioned) wrapper.
  #viewerContainer {
    position: absolute;
    inset: 0;
    overflow: auto;
  }

  .pdfViewer {
    --scale-factor: 1;
  }

  .page {
    --user-unit: 1;
    --total-scale-factor: calc(var(--scale-factor) * var(--user-unit));
    --scale-round-x: 1px;
    --scale-round-y: 1px;

    direction: ltr;
    width: 816px;
    height: 1056px;
    margin: var(--page-margin);
    position: relative;
    overflow: visible;
    border: var(--page-border);
    background-clip: content-box;
    background-color: rgba(255, 255, 255, 1);
  }

  .canvasWrapper {
    overflow: hidden;
    width: 100%;
    height: 100%;

    canvas {
      position: absolute;
      top: 0;
      left: 0;
      margin: 0;
      display: block;
      width: 100%;
      height: 100%;
    }
  }

  .textLayer {
    position: absolute;
    text-align: initial;
    inset: 0;
    overflow: clip;
    opacity: 1;
    line-height: 1;
    letter-spacing: normal;
    word-spacing: normal;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    text-size-adjust: none;
    forced-color-adjust: none;
    transform-origin: 0 0;
    z-index: 0;

    // CSS variable system required by pdfjs v6 for correct span scaling
    --min-font-size: 1;
    --text-scale-factor: calc(var(--total-scale-factor) * var(--min-font-size));
    --min-font-size-inv: calc(1 / var(--min-font-size));

    span,
    br {
      color: transparent;
      position: absolute;
      white-space: pre;
      cursor: text;
      transform-origin: 0% 0%;
      -webkit-user-select: text;
      -moz-user-select: text;
      user-select: text;
    }

    > :not(.markedContent),
    .markedContent span:not(.markedContent) {
      z-index: 1;
      --font-height: 0;
      font-size: calc(var(--text-scale-factor) * var(--font-height));
      --scale-x: 1;
      --rotate: 0deg;
      transform: rotate(var(--rotate)) scaleX(var(--scale-x)) scale(var(--min-font-size-inv));
    }

    .markedContent {
      display: contents;
    }

    .highlight {
      --highlight-bg-color: var(--highlight-color, rgb(180 0 170 / 0.25));
      --highlight-selected-bg-color: rgb(0 100 0 / 0.25);
      margin: -1px;
      padding: 1px;
      background-color: var(--highlight-bg-color);
      border-radius: 4px;

      &.appended {
        position: initial;
      }

      &.begin {
        border-radius: 4px 0 0 4px;
      }

      &.end {
        border-radius: 0 4px 4px 0;
      }

      &.middle {
        border-radius: 0;
      }

      &.selected {
        background-color: var(--highlight-selected-bg-color);
        scroll-margin-top: 50px;
      }
    }

    ::-moz-selection {
      background: rgba(0, 0, 255, 0.25);
      color: transparent;
    }

    ::selection {
      background: rgba(0, 0, 255, 0.25);
      color: transparent;
    }

    br::-moz-selection {
      background: transparent;
    }

    br::selection {
      background: transparent;
    }

    .endOfContent {
      display: block;
      position: absolute;
      inset: 100% 0 0;
      z-index: 0;
      cursor: default;
      -webkit-user-select: none;
      -moz-user-select: none;
      user-select: none;
    }

    &.selecting .endOfContent {
      top: 0;
    }
  }

  .pdfViewer.removePageBorders .page {
    margin: 0 auto 10px;
    border: none;

    &:last-of-type {
      margin-bottom: 0;
    }
  }

  @keyframes moveDefault {
    from {
      background-position: 0 top;
    }

    to {
      background-position: -39rem top;
    }
  }

  .modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-self: center;

    .modalContent {
      padding: 24px;
      box-shadow: var(--litpdf-surface-shadow, #{$shadow});
      background-color: var(--litpdf-surface-background, #fff);
      border-radius: 8px;
      margin: 0 auto;
    }
  }

  .loadingText {
    display: block;
    text-align: center;
    font-size: 0.8rem;
    margin-bottom: 8px;
  }

  .loadingBar {
    display: flex;
    align-items: center;
    justify-self: center;
    width: 200px;

    .progress {
      text-align: center;
      color: #fff;
      padding: 4px;
      border-radius: 12px;
      font-size: 0.6rem;
      background-color: var(--litpdf-accent-color, #{map-get($primary-color, 'medium')});
      transition: width 200ms;
    }
  }

  

  .hidden {
    display: none;
  }

  [hidden] {
    display: none;
  }
}

// The Fullscreen API replaces the host's normal box with the top layer,
// which doesn't inherit the consumer's sizing — pin it to the viewport
// explicitly so the toolbar + viewer layout still fills the screen.
:host(:fullscreen) {
  width: 100%;
  height: 100%;
  background-color: var(--litpdf-surface-background, #fff);
}

:host([loaded]) {
  .pdfViewer .page .loadingIcon {
    display: none;
  }

  .modal {
    display: none;
  }
}