@charset "UTF-8";
/* CSS Document */

.comparison-slider {
  --position: 50%;
  position: relative;
  width: 100%;
  overflow: hidden;
}

.slider-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.after-img {
  position: relative;
}

/* The magic clipping */
.before-img {
  position: absolute;
  top: 0;
  left: 0;
  /* Clips the right side of the top image dynamically */
  clip-path: polygon(0 0, var(--position) 0, var(--position) 100%, 0 100%);
}

/* Custom Visual Handle */
.slider-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--position);
  width: 4px;
  background: #000000;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 10;
}

.handle-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 94px;
  height: 94px;
  border-radius: 50%;
  background: #000000;
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 
 * Invisible Range Input over the whole container
 * This captures all touch & drag events natively for free!
 */
.slider-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: ew-resize;
  z-index: 20;
  margin: 0;
}