/*
 * Where the viewer package sits inside a MAS case frame, and what shape its
 * controls take.
 *
 * The package draws its own controls and reads --sz-* tokens to place and paint
 * them. Shape is shared by every MAS portal and lives here; colour differs per
 * portal and is declared by the theme (frames.less maps the theme's own accent
 * onto --sz-control-bg, so a branded theme needs no CSS of its own).
 *
 * Hand-written: assets/css/image-viewer.css next to it is copied from the
 * package by grunt and must not be edited.
 */

.frame-map-wrap {
    /*
     * Distance from the map edge. The zoom stack and the readout hang off the
     * top-left corner; the bottom row is raised to 64px so it clears the
     * staining labels the theme lays over the same strip.
     */
    --sz-chrome-inset: 16px;

    /*
     * Frames.less paints the controls in the theme's accent. A theme built
     * before it did so would otherwise get white buttons with white icons.
     */
    --sz-control-bg: #4d4d4d;

    /*
     * A round-ended pill of two 40px buttons, which is the shape MAS portals
     * have always used for the zoom control.
     */
    --sz-control-size: 40px;
    --sz-radius: 40px;
    --sz-control-fg: #fff;
    --sz-control-shadow: none;
    --sz-control-hover: rgba(255, 255, 255, 0.2);

    /*
     * A switch that is on keeps the portal's colour rather than the package's
     * default blue; the overview switch below turns white when it is off.
     */
    --sz-control-active-bg: var(--sz-control-bg);
    --sz-control-active-fg: var(--sz-control-fg, #fff);
}

/*
 * The bottom row only. Raising --sz-chrome-inset for the whole frame would push
 * the zoom stack 64px down from the top edge as well. 64px clears one line of
 * labels; when they wrap, the controller reports how high they reach.
 */
.frame-map-wrap .ol-scale-line,
.frame-map-wrap .ol-control.ol-overviewmap {
    bottom: max(64px, var(--mas-frame-labels-reach, 0px) + 8px);
}

/*
 * The readout is a pill like the zoom stack above it, not a boxed number like
 * the rest of the bottom row.
 */
.frame-map-wrap .ol-magnification {
    /* sized by its text, so "?X" is a circle and "0.21X" a short pill */
    width: auto;
    min-width: var(--sz-control-size, 40px);
    height: var(--sz-control-size, 40px);
    line-height: var(--sz-control-size, 40px);
    padding: 0 10px;
    background: var(--sz-control-bg);
    color: var(--sz-control-fg, #fff);
}

/* Level list under the pill, in the same colours. */
.frame-map-wrap .ol-magnification-levels {
    background: var(--sz-control-bg);
}

/*
 * Beside the readout rather than under it, where the rotation column starts
 * 12px lower and would cover the first levels.
 */
.frame-map-wrap .ol-magnification--top-left .ol-magnification-levels {
    top: 0;
    bottom: auto;
    inset-inline: calc(100% + 8px) auto;
    width: max-content;
    min-width: 100%;
    margin: 0;
}

/* the readout's own 40px line height would make every level that tall */
.frame-map-wrap .ol-magnification-level {
    color: var(--sz-control-fg, #fff);
    line-height: 1.4;
}

/* the level shown now reads like the active staining label: white */
.frame-map-wrap .ol-magnification-level.ol-magnification-level--current {
    background: #fff;
    color: var(--sz-control-bg);
}

/*
 * The ruler and the thumbnail keep a light surface - a scale bar has to stay
 * readable over whatever tissue is behind it - and take the portal's colour on
 * their frame and type.
 */
.frame-map-wrap .ol-scale-line,
.frame-map-wrap .ol-control.ol-overviewmap {
    --sz-border: var(--sz-control-bg);

    border-radius: 6px;
    background: rgba(255, 255, 255, 0.85);
}

.frame-map-wrap .ol-scale-line-inner {
    border-color: var(--sz-control-bg);
    color: var(--sz-control-bg);
    font-weight: 600;
}

.frame-map-wrap .ol-overviewmap-box {
    border: 2px solid var(--sz-control-bg);
}

.frame .frame-maps .frame-map-wrap.frame-is-expanded {
    margin: 0;
}

/*
 * The frame's own buttons: fullscreen for this slide and expand over the
 * neighbour. The package draws them into a declaration that sits in the
 * controls overlay after the map, and no theme places it: the themes only know
 * the hand-written buttons it replaced (.btn-fullscreen, .btn-case-fullscreen).
 * Left in the flow, the row lands under the map, where the frame clips it. Top
 * right is where those buttons were.
 */
.frame-map-wrap .frame-controls [data-sz-frame-toolbar] {
    position: absolute;
    top: var(--sz-chrome-inset, 16px);
    right: var(--sz-chrome-inset, 16px);
    /* frames.less lifts the map of an expanded frame to 5 */
    z-index: 6;
}

/* the size of the zoom pill beside them, and the glyph size of the old buttons */
.frame-map-wrap [data-sz-frame-toolbar] .sz-control-btn,
.frame-map-wrap [data-sz-frame-view] .sz-viewer-toolbar .sz-control-btn {
    width: var(--sz-control-size, 40px);
    height: var(--sz-control-size, 40px);
    font-size: 24px;
}

/*
 * The column under the zoom: the rotation steps, then the overview switch.
 * Below the zoom pill, and below the magnification readout as well when the
 * slide is calibrated enough to have one (the controller marks that case).
 */
.frame-map-wrap .frame-controls [data-sz-frame-view] {
    position: absolute;
    top: calc(var(--sz-chrome-inset, 16px) + 2 * var(--sz-control-size, 40px) + var(--sz-chrome-gap, 12px));
    left: var(--sz-chrome-inset, 16px);
    z-index: 6;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sz-chrome-gap, 12px);
    /* the gaps between the groups belong to the map, not to this box */
    pointer-events: none;
}

.frame-map-wrap [data-sz-frame-view] .sz-rotation {
    pointer-events: auto;
}

.frame-map-wrap .frame-controls [data-sz-frame-view].mas-frame-view--after-readout {
    top: calc(var(--sz-chrome-inset, 16px) + 3 * var(--sz-control-size, 40px) + 2 * var(--sz-chrome-gap, 12px));
}

/*
 * The rotation steps under each other, joined into one pill like the zoom
 * pill above them; the package stacks them as separate buttons.
 */
.frame-map-wrap [data-sz-frame-view] .sz-rotation {
    gap: 0;
    overflow: hidden;
    border-radius: var(--sz-radius, 40px);
}

.frame-map-wrap [data-sz-frame-view] .sz-rotation .sz-control-btn {
    width: var(--sz-control-size, 40px);
    height: var(--sz-control-size, 40px);
    border-radius: 0;
    font-size: 20px;
}

/*
 * The overview switch is white while the overview is off and takes the
 * portal's colour once it is on, ringed like an inactive staining label so it
 * still shows over white tissue.
 */
.frame-map-wrap [data-sz-frame-view] .sz-control-btn--overview:not(.sz-control-btn--active) {
    background: #fff;
    color: var(--sz-control-bg);
    box-shadow: inset 0 0 0 1px var(--sz-control-bg);
}

.frame-map-wrap [data-sz-frame-view] .sz-control-btn--overview:not(.sz-control-btn--active):hover {
    background: #fff;
    background: color-mix(in srgb, var(--sz-control-bg) 15%, #fff);
}

/*
 * The package drops the ruler, the readout and the thumbnail once a map is
 * under 720px, the width its own bottom row needs. Two frames side by side are
 * narrower than that on any desktop, and a phone narrower still, but a MAS
 * frame keeps the readout up by the zoom, so its row is only the ruler and the
 * thumbnail, and they fit. The thumbnail also has a switch here, which the
 * package rule would override.
 */
.frame-map-wrap .ol-scale-line,
.frame-map-wrap .ol-magnification,
.frame-map-wrap .ol-control.ol-overviewmap {
    display: block;
}

/*
 * The package keeps the ruler clear of a rotation row in the bottom-left
 * corner and of the readout, neither of which a frame has there, which
 * squeezes it to nothing in a frame this narrow.
 */
.frame-map-wrap .ol-scale-line {
    max-width: calc(100% - 3 * var(--sz-chrome-inset, 16px) - var(--sz-overview-size, clamp(70px, 18vh, 160px)) - var(--sz-chrome-gap, 12px));
}

/*
 * A phone shows one frame, so there is no neighbour to expand over. The same
 * width frames.less calls a phone.
 */
@media (max-width: 992px) {
    .frame-map-wrap [data-sz-frame-toolbar] .sz-control-btn:not(.sz-control-btn--fullscreen) {
        display: none;
    }
}