/* Fullscreen image viewer, driven by scripts/library/image_zoom.js */

.post-content img.zoomable {
    cursor: zoom-in;
}

.img-zoom-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;

    display: flex;

    /* The script dims the backdrop through --img-zoom-fade while the image is being
       dragged away, so the whole viewer lets the page show through as it goes. */
    --img-zoom-fade: 1;
    background: rgba(0, 0, 0, calc(0.92 * var(--img-zoom-fade)));

    /* Fades both ways; the script keeps the hide in sync with the transition. */
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;

    /* Every gesture is handled in JS, so the browser must not scroll or zoom. */
    touch-action: none;
    overscroll-behavior: contain;
    -webkit-tap-highlight-color: transparent;
}

.img-zoom-overlay[hidden] {
    display: none;
}

/* It only takes focus so that Escape and Tab have somewhere to land. */
.img-zoom-overlay:focus {
    outline: none;
}

.img-zoom-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}

.img-zoom-stage {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.img-zoom-img {
    max-width: 100%;
    max-height: 100%;
    margin: 0;

    cursor: zoom-in;
    user-select: none;
    -webkit-user-drag: none;
    will-change: transform;
}

/* Only the zoom toggle and the end of a swipe-to-dismiss animate; a drag itself
   follows the finger frame by frame. */
.img-zoom-img.smooth {
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.img-zoom-overlay.settling {
    transition: opacity 0.15s ease, background-color 0.2s ease;
}

/* Clicking the image toggles the zoom, so the cursor advertises which way. */
.img-zoom-overlay.zoomed .img-zoom-img {
    cursor: zoom-out;
}

/* While dragging, the pointer is captured by the overlay, so the grabbing hand has
   to be set there as well — the image below it no longer decides the cursor. */
.img-zoom-overlay.panning,
.img-zoom-overlay.panning .img-zoom-img {
    cursor: grabbing;
}

.img-zoom-close {
    position: absolute;
    top: max(8px, env(safe-area-inset-top));
    right: max(8px, env(safe-area-inset-right));

    /* Bare glyph, but with a comfortable touch target around it. */
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;
    appearance: none;
    background: none;
    border: none;

    font-size: 51px;
    line-height: 1;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
    /* Large enough to find, faint enough to stay out of the way of the image. */
    opacity: 0.35;

    cursor: pointer;
    transition: opacity 0.15s ease;
}

.img-zoom-close:hover,
.img-zoom-close:focus-visible {
    opacity: 0.85;
}

body.img-zoom-open {
    overflow: hidden;
}