.pdfViewer-content {
    height: 100%;
    width: 100%;
    position: absolute;
    display: inline-block;
    top: 0px;
    left: 0px;
}

:root {
    --devicePixelRatio: 1; // the actual value of this will be set in PDFViewer.tsx;
}

.pdfViewerDash,
.pdfViewerDash-interactive {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    position: absolute;
    overflow-y: auto;
    overflow-x: hidden;
    transform-origin: top left;

    .annotationLayer {
        transform: scale(var(--devicePixelRatio));
    }
    .textLayer {
        opacity: unset;
        mix-blend-mode: multiply; // bcz: makes text fuzzy!
        // all these below fix issues with PDFjs
        transform: scale(var(--devicePixelRatio));
        --total-scale-factor: var(--scale-factor); //    these 3 are used by PDFjs but not defined. why???
        --scale-round-x: 1px;
        --scale-round-y: 1px;
    }
    [data-main-rotation='90'] {
        transform: scale(var(--devicePixelRatio)) rotate(90deg) translateY(-100%);
    }
    .textLayer ::selection {
        background: #accef76a;
    }

    // should match the backgroundColor in createAnnotation()
    .textLayer .highlight {
        background-color: yellow;
    }

    .textLayer .highlight.selected {
        background-color: orange;
    }

    .page {
        position: relative;
        border: unset;
        height: 100% !important;
        min-height: 20px; // bcz: prevents PdfJS from the collapsing the page to 0 heright which causes the entire pdf to fail to render
    }

    .pdfViewerDash-text-selected {
        // position: relative;  // bcz: this breaks auto-scrolling using the inline search box
        z-index: -1;

        .textLayer {
            pointer-events: all;
            user-select: text;
            z-index: 0;
        }
    }

    .pdfViewerDash-text {
        transform-origin: top left;

        .textLayer {
            will-change: transform;
        }
    }

    .pdfViewerDash-overlay {
        transform-origin: left top;
        position: absolute;
        top: 0px;
        left: 0px;
        display: inline-block;
        width: 100%;
    }

    .pdfViewerDash-overlayAnno {
        top: -17px;
        pointer-events: none;
        width: max-content;
        height: 20px;
        position: absolute;
        background: #b8b8b8;
        border-radius: 5px;
        display: block;
    }

    .pdfViewerDash-annotationLayer {
        position: absolute;
        transform-origin: left top;
        top: 0px;
        width: 100%;
        pointer-events: none;
        mix-blend-mode: multiply; // bcz: makes text fuzzy!
    }

    .pdfViewerDash-waiting {
        width: 70%;
        height: 70%;
        margin: 15%;
        transition: 0.4s opacity ease;
        opacity: 0.7;
        position: absolute;
        z-index: 10;
    }
}

.pdfViewerDash-interactive {
    pointer-events: all;
    &::-webkit-scrollbar {
        width: 40px;
    }
}

.loading-spinner {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    z-index: 200;
    font-size: 20px;
    font-weight: bold;
    color: #17175e;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}