/* The before and after view for docs/assets/compare.js. */

figure.compare {
    margin: 1em 0;
}

.compare-frame {
    position: relative;
    --split: 50%;
}

.compare-frame img {
    display: block;
    width: 100%;
    height: auto;
}

/* The second image covers the first, and shows only right of the divider. */
.compare-frame img.compare-top {
    position: absolute;
    inset: 0;
    height: 100%;
    clip-path: inset(0 0 0 var(--split));
}

.compare-frame::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--split);
    width: 2px;
    margin-left: -1px;
    background: #fff;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
    pointer-events: none;
}

.compare-label {
    position: absolute;
    top: 0.5em;
    padding: 0.15em 0.5em;
    font-size: 0.85em;
    color: #fff;
    background: rgba(0, 0, 0, 0.6);
    pointer-events: none;
}

.compare-label-left {
    left: 0.5em;
}

.compare-label-right {
    right: 0.5em;
}

/* Invisible, over the whole frame, so dragging anywhere moves the divider. */
.compare-slider {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: ew-resize;
}

.compare-frame:focus-within {
    outline: 2px solid var(--links, #4183c4);
    outline-offset: 2px;
}

.compare-enlarge {
    position: absolute;
    right: 0.5em;
    bottom: 0.5em;
    z-index: 1;
    padding: 0.2em 0.6em;
    font: inherit;
    font-size: 0.85em;
    color: #fff;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.6);
    cursor: pointer;
}

/* Enlarged: the view covers the window, and the frame grows as far as it can while keeping
   the images' proportions, so the top image stays exactly over the bottom one. */
.compare-view.compare-open {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.9);
}

/* --aspect is set from the image once it loads; 16:9, the shape of the screenshots, stands in
   until then. */
.compare-view.compare-open .compare-frame {
    width: min(96vw, calc(96vh * var(--aspect, 1.7778)));
}