/**
 * Before/after comparison slider.
 *
 * The whole reveal is one custom property, --cms-compare-position, a
 * percentage set inline by the partial and updated by compare.js as the
 * visitor drags. Everything else (the clip, the divider, the handle) is
 * positioned from it, so moving the slider is a single style write rather
 * than a layout pass over several elements.
 *
 * Nothing here depends on the script having run. The partial sets the
 * starting position inline, so with compare.js missing the figure still
 * renders both images clipped at that position, and the range input still
 * moves the divider under keyboard control (the input's own :focus and value
 * are native; only pointer-dragging anywhere on the image needs the script).
 *
 * Every value a theme is likely to want is a --cms-compare-* property, set on
 * .cms-compare or any ancestor.
 */

.cms-compare {
    --cms-compare-position: 50%;

    --cms-compare-divider-width: 3px;
    --cms-compare-divider-color: #fff;
    --cms-compare-divider-shadow: 0 0 6px rgba(0, 0, 0, 0.45);

    --cms-compare-handle-size: 40px;
    --cms-compare-handle-bg: #fff;
    --cms-compare-handle-color: #1e293b;
    --cms-compare-handle-radius: 50%;
    --cms-compare-handle-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);

    --cms-compare-label-bg: rgba(15, 23, 42, 0.72);
    --cms-compare-label-color: #fff;
    --cms-compare-label-radius: 4px;
    --cms-compare-label-padding: 0.25rem 0.6rem;
    --cms-compare-label-size: 0.8125rem;
    --cms-compare-label-offset: 0.75rem;

    --cms-compare-focus-ring: 3px solid #2563eb;

    position: relative;
    display: block;
    margin: 0;
    overflow: hidden;
    line-height: 0;

    /* The pointer is the control across the whole surface, and a drag over an
       image would otherwise start a native image drag instead. */
    touch-action: none;
    user-select: none;
    -webkit-user-drag: none;
}

/* ───── Layout knobs, matching the image/gallery fields in blocks.css ───── */
.cms-compare[data-width="small"]  { max-width: 280px; }
.cms-compare[data-width="medium"] { max-width: 600px; }
.cms-compare[data-width="large"]  { max-width: 880px; }
.cms-compare[data-width="full"]   { max-width: 100%; }

.cms-compare[data-align="left"]   { margin-left: 0;    margin-right: auto; }
.cms-compare[data-align="center"] { margin-left: auto; margin-right: auto; }
.cms-compare[data-align="right"]  { margin-left: auto; margin-right: 0; }

.cms-compare[data-radius="none"]  { border-radius: 0; }
.cms-compare[data-radius="small"] { border-radius: 4px; }
.cms-compare[data-radius="large"] { border-radius: 16px; }

/* ───── The two images ─────
 * The "before" is in flow and gives the figure its height; the "after" is
 * layered over it and clipped. Both are the same box, so they stay aligned
 * pixel for pixel however the divider moves.
 */
.cms-compare__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cms-compare__after {
    position: absolute;
    inset: 0;
}

/* clip-path rather than a shrinking wrapper: the image keeps its own
   geometry, so the revealed half never squashes as the divider moves. */
.cms-compare[data-orientation="horizontal"] .cms-compare__after {
    clip-path: inset(0 0 0 var(--cms-compare-position));
}

.cms-compare[data-orientation="vertical"] .cms-compare__after {
    clip-path: inset(var(--cms-compare-position) 0 0 0);
}

/* ───── Divider and handle ───── */
.cms-compare__divider {
    position: absolute;
    background: var(--cms-compare-divider-color);
    box-shadow: var(--cms-compare-divider-shadow);
    pointer-events: none;
}

.cms-compare[data-orientation="horizontal"] .cms-compare__divider {
    top: 0;
    bottom: 0;
    left: var(--cms-compare-position);
    width: var(--cms-compare-divider-width);
    transform: translateX(-50%);
}

.cms-compare[data-orientation="vertical"] .cms-compare__divider {
    left: 0;
    right: 0;
    top: var(--cms-compare-position);
    height: var(--cms-compare-divider-width);
    transform: translateY(-50%);
}

.cms-compare__handle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--cms-compare-handle-size);
    height: var(--cms-compare-handle-size);
    border-radius: var(--cms-compare-handle-radius);
    background: var(--cms-compare-handle-bg);
    color: var(--cms-compare-handle-color);
    box-shadow: var(--cms-compare-handle-shadow);
}

.cms-compare__handle svg {
    width: 60%;
    height: 60%;
}

.cms-compare[data-orientation="vertical"] .cms-compare__handle svg {
    transform: rotate(90deg);
}

/* ───── Labels ───── */
.cms-compare__label {
    position: absolute;
    top: var(--cms-compare-label-offset);
    z-index: 1;
    padding: var(--cms-compare-label-padding);
    border-radius: var(--cms-compare-label-radius);
    background: var(--cms-compare-label-bg);
    color: var(--cms-compare-label-color);
    font-size: var(--cms-compare-label-size);
    line-height: 1.4;
    pointer-events: none;
}

.cms-compare__label--before { left: var(--cms-compare-label-offset); }
.cms-compare__label--after  { right: var(--cms-compare-label-offset); }

/* ───── The control ─────
 * A real range input covering the figure. It is transparent rather than
 * hidden: hiding it would take the keyboard and assistive tech with it. The
 * visible divider above is what the visitor sees it move.
 */
.cms-compare__range {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    appearance: none;
    -webkit-appearance: none;
    cursor: ew-resize;
}

.cms-compare[data-orientation="vertical"] .cms-compare__range {
    cursor: ns-resize;
}

.cms-compare__range::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: var(--cms-compare-handle-size);
    height: var(--cms-compare-handle-size);
    background: transparent;
    border: 0;
}

.cms-compare__range::-moz-range-thumb {
    width: var(--cms-compare-handle-size);
    height: var(--cms-compare-handle-size);
    background: transparent;
    border: 0;
}

/* Focus has to land on something visible: the input itself is transparent,
   so the ring is drawn around the figure. */
.cms-compare__range:focus-visible {
    outline: none;
}

.cms-compare:has(.cms-compare__range:focus-visible) {
    outline: var(--cms-compare-focus-ring);
    outline-offset: 2px;
}

/* The alt text of the hidden second image, kept in the accessibility tree
   without taking space. */
.cms-compare__sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}