/* compare-images-slider v5.0.0 | https://stamat.github.io/compare-images-slider/ | MIT License */
@charset "UTF-8";
:root {
  --compare-images-slider-initial-position: 50%;
  --compare-images-slider-handle-bg: #fff;
  --compare-images-slider-handle-fg: #000;
  --compare-images-slider-handle-size: 42px;
  --compare-images-slider-handle-font-size: 28px;
}

.compare-images-slider,
compare-images-slider {
  display: block;
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  /* iOS pops the save-image sheet on a long press, which lands mid-drag on a slow
     one. `-webkit-user-select: none` above suppresses it on its own in most builds;
     this states it, rather than resting on a side effect that has regressed before. */
  -webkit-touch-callout: none;
  /* The live reveal position. The script writes it inline on every render, which beats
     this declaration - so before the script has run, and with no script at all, the
     reveal paints wherever `--compare-images-slider-initial-position` says. */
  --compare-images-slider-position: var(--compare-images-slider-initial-position);
  /* Kills the browser's native image drag, which otherwise carries a ghost off the
     slider mid-gesture. Images only: a `<video controls>` or an embedded map has its
     own pointer handling to lose, and neither has a drag ghost to suppress. */
}
.compare-images-slider img,
compare-images-slider img {
  pointer-events: none;
}
.compare-images-slider,
compare-images-slider {
  /* The base layer is what gives the slider its size, and the reveal layer's copy has to lay
     out identically over it or the two halves do not line up. `picture` is addressed
     through its `img`, the wrapper itself having no box worth sizing. Anything else -
     a div, an iframe, an svg sprite - is left to fill the reveal layer on its own terms. */
}
.compare-images-slider > :is(img, video, canvas), .compare-images-slider > picture > img,
compare-images-slider > :is(img, video, canvas),
compare-images-slider > picture > img {
  max-width: 100%;
  height: auto;
  display: block;
}
.compare-images-slider,
compare-images-slider {
  /* The reveal layer covers the whole slider and is clipped back to the current position, rather
     than being sized to it. That is what keeps the overlay laying out at the same size as
     the image underneath with no script measuring anything - sizing it instead
     would need every child resized to the slider's width, on load and on every resize. */
}
.compare-images-slider .compare-images-slider-reveal,
compare-images-slider .compare-images-slider-reveal {
  position: absolute;
  inset: 0;
  z-index: 2;
  -webkit-clip-path: inset(0 calc(100% - var(--compare-images-slider-position)) 0 0);
  clip-path: inset(0 calc(100% - var(--compare-images-slider-position)) 0 0);
}
.compare-images-slider .compare-images-slider-reveal > :is(img, video, canvas), .compare-images-slider .compare-images-slider-reveal > picture > img,
compare-images-slider .compare-images-slider-reveal > :is(img, video, canvas),
compare-images-slider .compare-images-slider-reveal > picture > img {
  width: 100%;
  height: auto;
  display: block;
}
.compare-images-slider .compare-images-slider-handle,
compare-images-slider .compare-images-slider-handle {
  position: absolute;
  left: var(--compare-images-slider-position);
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  height: 100%;
  cursor: ew-resize;
  z-index: 3;
  touch-action: none;
}
.compare-images-slider .compare-images-slider-handle:after,
compare-images-slider .compare-images-slider-handle:after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--compare-images-slider-handle-size);
  height: var(--compare-images-slider-handle-size);
  transform: translate3d(-50%, -50%, 0);
  content: "↔";
  font-size: var(--compare-images-slider-handle-font-size);
  background: var(--compare-images-slider-handle-bg);
  color: var(--compare-images-slider-handle-fg);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 21px;
  /* Flex centres the line box, not the ink: the arrow sits on the math axis, below the
     middle of ascent and descent, so it lands low. Half the padding is the nudge up, and
     the amount is a knob - the glyph comes from whichever fallback font has U+2194. */
  box-sizing: border-box;
  padding-block-end: 0.08em;
}
.compare-images-slider .compare-images-slider-handle:focus-visible,
compare-images-slider .compare-images-slider-handle:focus-visible {
  outline: none;
}
.compare-images-slider .compare-images-slider-handle:focus-visible:after,
compare-images-slider .compare-images-slider-handle:focus-visible:after {
  outline: 3px solid Highlight;
  outline-offset: 2px;
}
.compare-images-slider[data-vertical] .compare-images-slider-reveal, .compare-images-slider[vertical] .compare-images-slider-reveal,
compare-images-slider[data-vertical] .compare-images-slider-reveal,
compare-images-slider[vertical] .compare-images-slider-reveal {
  -webkit-clip-path: inset(0 0 calc(100% - var(--compare-images-slider-position)) 0);
  clip-path: inset(0 0 calc(100% - var(--compare-images-slider-position)) 0);
}
.compare-images-slider[data-vertical] .compare-images-slider-handle, .compare-images-slider[vertical] .compare-images-slider-handle,
compare-images-slider[data-vertical] .compare-images-slider-handle,
compare-images-slider[vertical] .compare-images-slider-handle {
  left: 0;
  top: var(--compare-images-slider-position);
  width: 100%;
  height: 2px;
  margin-top: -1px;
  margin-left: 0;
  cursor: ns-resize;
}
.compare-images-slider[data-vertical] .compare-images-slider-handle:after, .compare-images-slider[vertical] .compare-images-slider-handle:after,
compare-images-slider[data-vertical] .compare-images-slider-handle:after,
compare-images-slider[vertical] .compare-images-slider-handle:after {
  content: "↕";
}
/*# sourceMappingURL=compare-images-slider.css.map */