/*
 * 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;

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

/*
 * 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.
 */
.frame-map-wrap .ol-scale-line,
.frame-map-wrap .ol-control.ol-overviewmap {
    bottom: 64px;
}

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

.frame-map-wrap .ol-magnification-level {
    color: var(--sz-control-fg, #fff);
}

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