/* Text layer styles for pdf.js — the invisible, selectable text overlay drawn
 * on top of each rendered page canvas.
 *
 * SOURCE: the `.textLayer` block extracted verbatim from
 *   https://cdn.jsdelivr.net/npm/pdfjs-dist@6.2.108/web/pdf_viewer.css
 * i.e. the exact version of pdfjs-dist vendored in this folder. The class
 * positions its spans using the CSS custom properties the TextLayer JS sets
 * (--font-height, --scale-x, --rotate, --min-font-size) plus --total-scale-factor
 * which the page container must define (see .viewer-page in css/style.css).
 *
 * Do NOT hand-tune these rules: when upgrading pdfjs-dist, re-extract this
 * block from the matching pdf_viewer.css instead, or text selection will drift
 * out of alignment with the glyphs painted on the canvas.
 *
 * The rest of pdf_viewer.css (toolbar/sidebar/annotation-editor chrome of the
 * stock pdf.js viewer) is deliberately not vendored — this app draws its own UI.
 */
.textLayer{
  color-scheme:only light;

  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;
  caret-color:CanvasText;
  z-index:0;

  &.highlighting{
    touch-action:none;
  }

  :is(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;
  }
  --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));

  > :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;
  }

  span[role="img"]{
    -webkit-user-select:none;
       -moz-user-select:none;
            user-select:none;
    cursor:default;
  }

  .highlight{
    --highlight-bg-color:rgb(180 0 170 / 0.25);
    --highlight-selected-bg-color:rgb(0 100 0 / 0.25);
    --highlight-backdrop-filter:none;
    --highlight-selected-backdrop-filter:none;

    @media screen and (forced-colors: active){
      --highlight-bg-color:transparent;
      --highlight-selected-bg-color:transparent;
      --highlight-backdrop-filter:var(--hcm-highlight-filter);
      --highlight-selected-backdrop-filter:var(
        --hcm-highlight-selected-filter
      );
    }

    margin:-1px;
    padding:1px;
    background-color:var(--highlight-bg-color);
    backdrop-filter:var(--highlight-backdrop-filter);
    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);
      backdrop-filter:var(--highlight-selected-backdrop-filter);
      scroll-margin-top:50px;
    }
  }

  ::-moz-selection{
    background:rgba(0 0 255 / 0.25);
    background:color-mix(in srgb, AccentColor, transparent 50%);
    color:transparent;
  }

  ::selection{
    background:rgba(0 0 255 / 0.25);
    background:color-mix(in srgb, AccentColor, transparent 50%);
    color:transparent;
  }

  &.selectionRendering{
    ::-moz-selection{
      background:transparent;
      color:transparent;
    }
    ::selection{
      background:transparent;
      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;
  }
}

