/*
 * Image comparison component.
 *
 * Structure:
 *
 * .image-compare
 * ├── .image-compare-stage
 * │   ├── .image-compare-base
 * │   ├── .image-compare-overlay
 * │   │   └── .image-compare-overlay-image
 * │   ├── .image-compare-label.before
 * │   └── .image-compare-label.after
 * │
 * └── .image-compare-slider
 */


/* ------------------------------------------------------------
 * Component
 * ------------------------------------------------------------ */

.image-compare {
    width: 100%;
    max-width: 100%;

    margin: 0;

    box-sizing: border-box;
}


/* ------------------------------------------------------------
 * Image area
 *
 * Everything that belongs to the image comparison stays inside
 * this element.
 *
 * overflow: hidden guarantees that the divider can never extend
 * outside the image area.
 * ------------------------------------------------------------ */

.image-compare-stage {
    position: relative;

    width: 100%;

    overflow: hidden;

    /*
     * Prevent inline-image baseline spacing from increasing the
     * stage height.
     */
    line-height: 0;

    /*
     * Initial comparison position.
     * JavaScript updates this value while dragging the slider.
     */
    --compare-position: 50%;
}


/* ------------------------------------------------------------
 * Base image
 *
 * This is the "after" image.
 * In the current example:
 *
 *     TAA
 *
 * It always fills the complete stage.
 * ------------------------------------------------------------ */

.image-compare-base {
    display: block;

    width: 100%;
    height: auto;

    max-width: 100%;

    margin: 0;
    padding: 0;

    border: 0;
}


/* ------------------------------------------------------------
 * Overlay
 *
 * This is the visible region of the "before" image.
 *
 * Its width changes together with the slider.
 * ------------------------------------------------------------ */

.image-compare-overlay {
    position: absolute;

    top: 0;
    left: 0;
    bottom: 0;

    width: var(--compare-position);

    overflow: hidden;

    margin: 0;
    padding: 0;

    pointer-events: none;
}


/* ------------------------------------------------------------
 * Overlay image
 *
 * Important:
 *
 * The image itself must remain the same size as the base image.
 * Only its parent (.image-compare-overlay) is clipped.
 *
 * JavaScript sets its exact pixel width to the stage width.
 * ------------------------------------------------------------ */

.image-compare-overlay-image {
    position: absolute;

    top: 0;
    left: 0;

    display: block;

    height: auto;

    max-width: none;

    margin: 0;
    padding: 0;

    border: 0;

    pointer-events: none;
}


/* ------------------------------------------------------------
 * Divider
 *
 * Use a pseudo-element instead of a separate DOM element.
 *
 * Because this pseudo-element belongs to .image-compare-stage
 * and the stage has overflow: hidden, the divider cannot extend
 * above or below the image.
 * ------------------------------------------------------------ */

.image-compare-stage::after {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;

    left: var(--compare-position);

    width: 2px;

    background: black;

    transform: translateX(-1px);

    z-index: 30;

    pointer-events: none;
}


/* ------------------------------------------------------------
 * Labels
 * ------------------------------------------------------------ */

.image-compare-label {
    position: absolute;

    top: 10px;

    padding: 4px 8px;

    background: rgba(0, 0, 0, 0.5);
    color: white;

    font-size: 14px;
    font-weight: 600;
    line-height: normal;

    white-space: nowrap;

    z-index: 40;

    pointer-events: none;
}


.image-compare-label.before {
    left: 10px;
}


.image-compare-label.after {
    right: 10px;
}


/* ------------------------------------------------------------
 * Slider
 *
 * Slider is deliberately outside .image-compare-stage.
 * Therefore it does not participate in the image height.
 * ------------------------------------------------------------ */

.image-compare-slider {
    display: block;

    width: 100%;
    height: 20px;

    margin: 4px 0 0 0;
    padding: 0;

    box-sizing: border-box;

    cursor: ew-resize;
}