/* Uploaded images in rendered QuickText content (see RenderHtml.imageToHtml). Spaced like a
   paragraph. */

/* A landscape image is meant to fill the width, a portrait one half of it, and one in a table cell
   the cell's width */
div.qt-render div.qt-image,
div.qt-render div.qt-image-missing {
    margin: 0 0 var(--qt-paragraph-gap) 0;
}

div.qt-render div.qt-image {
    --qt-image-target: 100%;
}

div.qt-render div.qt-image-portrait {
    --qt-image-target: 50%;
}

/* On a phone, half the width would be too small */
div.qt-render.qt-context-mobile div.qt-image-portrait {
    --qt-image-target: 75%;
}

/* Selected specifically enough to override the mobile rule above */
div.qt-render td div.qt-image.qt-image-portrait,
div.qt-render th div.qt-image.qt-image-portrait {
    --qt-image-target: 100%;
}

/* The target width, unless that's more than twice the image's own width (--qt-image-width, set by
   RenderHtml), in which case its own width. The last term is hugely negative just when the target
   is more than twice the image's width, so max() then picks the image's width. Never wider than
   the target, so a large image is shrunk to fit. */
div.qt-render img.qt-image-img {
    display: block;
    margin: 0 auto;
    height: auto;
    width: min(var(--qt-image-target), max(var(--qt-image-width),
        calc(var(--qt-image-target) + (2 * var(--qt-image-width) - var(--qt-image-target)) * 1000)));
}

/* An image named which isn't in the user's catalog */
div.qt-render div.qt-image-missing {
    border: 1px dashed grey;
    color: grey;
    font-style: italic;
    padding: 0.5em;
    text-align: center;
}

/* On a slide, images directly in its body share the height the rest of its content leaves, each
   centred in its share, which SlideFitter sizes it to fit */
div.qt-render div.qt-slide-body:has(> div.qt-image) {
    display: flex;
    flex-direction: column;
}

div.qt-render div.qt-slide-body > div.qt-image {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}