/**
 * Click-to-zoom for images embedded in rich-text content.
 *
 * Styles the overlay built by js/image-zoom.js, used by the ticket and
 * knowledgebase pages in both the customer area and the admin panel.
 *
 * Colours come from the theme tokens defined in
 * theme/hesk3/customer/css/core/0_00_default_theme_vars.css
 */

/* Images inside rendered content advertise that they can be opened */
.browser-default img {
    cursor: zoom-in;
}

/* Overlay. Centred while the image fits the screen, scrollable once it does
   not: the auto margins on the image handle both without the script having to
   measure anything. The image's size is set in px by the script, so no
   max-width/max-height belongs here. */
.image-zoom {
    position: fixed;
    inset: 0;
    z-index: 9990;
    display: flex;
    padding: 24px;
    overflow: auto;
    background: var(--shadow-1-90, rgba(38, 40, 42, 0.92));
}

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

.image-zoom__img {
    margin: auto;
    display: block;
    cursor: pointer;
    background: var(--white-1, #ffffff);
    box-shadow: 0 10px 50px var(--shadow-1-60, rgba(38, 40, 42, 0.6));
    /* Three rules conspire to stop the image growing past the overlay, which
       would make zooming a no-op:
         - `flex-shrink` defaults to 1, so a flex item is squeezed back to the
           container width however wide it is told to be;
         - both app.css files carry a bare `img { max-width: 100% }`.
       Both are neutralised here - the script sets the size in px. */
    flex: none;
    max-width: none;
    max-height: none;
}

/* While a drag is in progress the pointer should not smear across the image */
.image-zoom__img.is-panning {
    cursor: grabbing;
    user-select: none;
}

/* .image-zoom__hint is styled inline by js/image-zoom.js, not here - see the
   comment on the hint in that file for why. */

.image-zoom__close {
    position: fixed;
    top: 14px;
    right: 18px;
    z-index: 1;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    font-size: 22px;
    line-height: 1;
    color: var(--white-1, #ffffff);
    background: hsla(var(--white--hsl, 0, 0%, 100%), 0.16);
    cursor: pointer;
}

.image-zoom__close:hover,
.image-zoom__close:focus {
    background: hsla(var(--white--hsl, 0, 0%, 100%), 0.3);
}

.image-zoom__close:focus-visible {
    outline: 2px solid var(--white-1, #ffffff);
    outline-offset: 2px;
}

@media print {
    .image-zoom {
        display: none !important;
    }
}