/* Flipbook
   ----------------------------------------------------------------------- */

.fw-flipbook {
    --fw-flipbook-ratio: 0.7727;

    container-type: inline-size;
}

.fw-flipbook__stage {
    perspective: 2400px;
    position: relative;
}

.fw-flipbook__book {
    aspect-ratio: calc(var(--fw-flipbook-ratio) * 2);
    display: flex;
    margin-inline: auto;
    position: relative;
    transform-style: preserve-3d;

    /* The book fills its container and takes its height from the page ratio.
	   Height is never capped with max-block-size: a definite width and a
	   definite height together override aspect-ratio, which is what left the
	   box wider than the pages and stretched every canvas. Fullscreen, where
	   the viewport really is the limit, caps the width instead. */
    inline-size: 100%;
}

.fw-flipbook--single .fw-flipbook__book {
    aspect-ratio: var(--fw-flipbook-ratio);
}

/* A radius set on the block reaches the pages by being inherited down, since
   the book cannot simply clip its contents: overflow: hidden would cut off
   the turning page as it rotates out of the plane. Only the outer corners of
   a spread are rounded, so the two pages still meet flat at the spine. */
.fw-flipbook__stage,
.fw-flipbook__book,
.fw-flipbook__turn,
.fw-flipbook__face {
    /* border-radius: inherit; */
}

.fw-flipbook__page--left {
    /* border-end-start-radius: inherit; */
    /* border-start-start-radius: inherit; */
}

.fw-flipbook__page--right {
    /* border-end-end-radius: inherit; */
    /* border-start-end-radius: inherit; */
}

.fw-flipbook--single .fw-flipbook__page--right {
    /* border-radius: inherit; */
}

.fw-flipbook__page {
    background-color: var(--wp--preset--color--white, #fff);
    flex: 1 1 50%;
    overflow: hidden;
    position: relative;
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.1));
}

.fw-flipbook--single .fw-flipbook__page--right {
    flex-basis: 100%;
}

.fw-flipbook__page.is-empty {
    background-color: transparent;
}

.fw-flipbook__canvas {
    display: block;
    inline-size: 100%;
    block-size: 100%;
}

/* The turning page sits over whichever half it is hinged to and rotates
   around the spine. Its back face carries the page revealed mid-turn. */
.fw-flipbook__turn {
    block-size: 100%;
    inline-size: 50%;
    inset-block-start: 0;
    position: absolute;
    transform-style: preserve-3d;
    transition: transform 0.7s ease-in-out;
    z-index: 2;
}

.fw-flipbook__turn.is-forward {
    inset-inline-start: 50%;
    transform-origin: left center;
}

.fw-flipbook__turn.is-backward {
    inset-inline-start: 0;
    transform-origin: right center;
}

.fw-flipbook__turn.is-forward.is-turning {
    transform: rotateY(-180deg);
}

.fw-flipbook__turn.is-backward.is-turning {
    transform: rotateY(180deg);
}

.fw-flipbook__face {
    backface-visibility: hidden;
    background-color: var(--wp--preset--color--white, #fff);
    block-size: 100%;
    inline-size: 100%;
    inset: 0;
    overflow: hidden;
    position: absolute;
}

.fw-flipbook__face--back {
    transform: rotateY(180deg);
}

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

.fw-flipbook__status {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    inset-block-start: 50%;
    inset-inline: 0;
    position: absolute;
    text-align: center;
    transform: translateY(-50%);
}

/* A class setting display outranks the browser's [hidden] rule, so hiding the
   status with the attribute needs saying explicitly. */
.fw-flipbook__status[hidden] {
    display: none;
}

.fw-flipbook__status-icon {
    color: var(--wp--preset--color--primary);
    line-height: 0;
}

.fw-flipbook__status-icon svg {
    animation: fw-flipbook-spin 0.9s linear infinite;
    display: block;
    fill: none;
    stroke: currentColor;
}

.fw-flipbook__controls {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--wp--preset--spacing--30, 0.75rem);
    justify-content: center;
    margin-block-start: var(--wp--preset--spacing--30, 0.75rem);
}

/* The theme colours and sizes button icons through .wp-block-button__link,
   which these are not, so the same treatment is repeated for them here. Lucide
   icons are strokes on an empty fill, so the colour goes on stroke and fill
   stays none. */
.fw-flipbook .fw-flipbook__button svg,
.fw-flipbook .fw-flipbook__download svg {
    fill: none;
    stroke: var(--wp--preset--color--accent);

    /* Inline by default, which leaves a baseline gap under the icon and pushes
       it off centre inside the circle. */
    display: block;
}

.fw-flipbook .fw-flipbook__download {
    align-items: center;
    display: inline-flex;
    gap: 0.5rem;
}

.fw-flipbook .fw-flipbook__download svg {
    stroke: currentColor;
}

.fw-flipbook .fw-flipbook__button--fullscreen svg {
    stroke: currentColor;
}

.fw-flipbook .fw-flipbook__icon--maximize {
    display: grid;
}

.fw-flipbook .fw-flipbook__icon--minimize,
.fw-flipbook.is-fullscreen .fw-flipbook__icon--maximize {
    display: none;
}

.fw-flipbook.is-fullscreen .fw-flipbook__icon--minimize {
    display: grid;
}

.fw-flipbook .fw-flipbook__icon {
    line-height: 0;
    place-items: center;
}

/* Colour, border and the hover, focus and active states all come from the
   theme's global button style by way of wp-element-button. Only the geometry
   is overridden here, since a global button is a wide pill and these are icon
   buttons. Scoped to the block so it outranks the global rule, which core
   prints inside :where() and therefore at zero specificity. */
.fw-flipbook .fw-flipbook__button {
    block-size: 2.5rem;
    cursor: pointer;
    display: grid;
    font-size: 1rem;
    inline-size: 2.5rem;
    letter-spacing: normal;
    line-height: 1;
    padding: 0;
    place-items: center;
}

.fw-flipbook .fw-flipbook__button[disabled] {
    cursor: default;
}

.fw-flipbook__pages {
    font-variant-numeric: tabular-nums;
    min-inline-size: 7ch;
    text-align: center;
}

/* Fullscreen paints its own ground: the block may have no background of its
   own, and a transparent one shows the browser's black behind the page. */
.fw-flipbook.is-fullscreen:not(.has-background) {
    background-color: var(--wp--preset--color--base, #fff);
}

.fw-flipbook.is-fullscreen {
    --fw-flipbook-max-height: 85vh;

    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--wp--preset--spacing--40, 1.5rem);
}

.fw-flipbook.is-fullscreen .fw-flipbook__book {
    inline-size: min(
        100%,
        calc(var(--fw-flipbook-max-height) * var(--fw-flipbook-ratio) * 2)
    );
}

.fw-flipbook.is-fullscreen.fw-flipbook--single .fw-flipbook__book {
    inline-size: min(
        100%,
        calc(var(--fw-flipbook-max-height) * var(--fw-flipbook-ratio))
    );
}

.fw-flipbook__notice {
    background-color: var(--wp--preset--color--base);
    border: 1px dashed currentColor;
    padding: var(--wp--preset--spacing--30, 0.75rem);
    text-align: center;
}

@media (prefers-reduced-motion: reduce) {
    .fw-flipbook__turn {
        transition-duration: 1ms;
    }

    /* Slowed rather than stopped: the spinner is the only sign that anything
       is still happening. */
    .fw-flipbook__status-icon svg {
        animation-duration: 3s;
    }
}

/* Text layer
   Trimmed from pdf.js's pdf_viewer.css — the rules that position the
   invisible text over the canvas, without the find and annotation styling
   this block has no use for. Class names are pdf.js's own and must stay.
   ----------------------------------------------------------------------- */

.textLayer {
    caret-color: CanvasText;
    color-scheme: only light;
    forced-color-adjust: none;
    inset: 0;
    letter-spacing: normal;
    line-height: 1;
    overflow: clip;
    position: absolute;
    text-align: initial;
    text-size-adjust: none;
    transform-origin: 0 0;
    word-spacing: normal;
    z-index: 1;

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

.textLayer :is(span, br) {
    color: transparent;
    cursor: text;
    position: absolute;
    transform-origin: 0% 0%;
    user-select: text;
    white-space: pre;
}

.textLayer > :not(.markedContent),
.textLayer .markedContent span:not(.markedContent) {
    --font-height: 0;
    --rotate: 0deg;
    --scale-x: 1;

    font-size: calc(var(--text-scale-factor) * var(--font-height));
    transform: rotate(var(--rotate)) scaleX(var(--scale-x))
        scale(var(--min-font-size-inv));
    z-index: 1;
}

.textLayer .markedContent {
    display: contents;
}

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

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

.textLayer.selecting .endOfContent {
    inset-block-start: 0;
}

/* Waiting on a render before a turn can start. */
.fw-flipbook.is-busy .fw-flipbook__stage {
    cursor: progress;
}

.fw-flipbook.is-busy .fw-flipbook__button,
.fw-flipbook .fw-flipbook__button[disabled] {
    opacity: 0.35;
}