.image-compare{background-color:var(--image-compare-background,var(--image-compare-background));border:var(--image-compare-border-width,var(--image-compare-border-width)) solid var(--image-compare-border-color,var(--image-compare-border-color));border-radius:var(--image-compare-border-radius,var(--image-compare-border-radius));overflow:hidden;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none}.image-compare__after,.image-compare__before{inset:0;overflow:hidden;position:absolute}.image-compare__after img,.image-compare__after picture,.image-compare__after video,.image-compare__before img,.image-compare__before picture,.image-compare__before video{display:block;height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.image-compare__after{z-index:1}.image-compare__before{z-index:2}.image-compare__handle{align-items:center;bottom:0;display:flex;justify-content:center;pointer-events:none;position:absolute;top:0;transform:translate(-50%);z-index:3}.image-compare__handle-line{background-color:var(--image-compare-handle-color-default,var(--image-compare-handle-color-default));bottom:0;position:absolute;top:0;transition:background-color var(--image-compare-transition-duration,var(--image-compare-transition-duration)) ease;width:var(--image-compare-handle-width,var(--image-compare-handle-width))}.image-compare__handle-icon,.image-compare__handle-line{box-shadow:var(--image-compare-handle-shadow,var(--image-compare-handle-shadow))}.image-compare__handle-icon{align-items:center;background-color:var(--image-compare-icon-background,var(--image-compare-icon-background));border-radius:9999px;color:var(--image-compare-icon-color,var(--image-compare-icon-color));display:flex;height:var(--image-compare-icon-size,var(--image-compare-icon-size));justify-content:center;position:relative;transition:transform var(--image-compare-transition-duration,var(--image-compare-transition-duration)) ease;width:var(--image-compare-icon-size,var(--image-compare-icon-size))}.image-compare__slider{cursor:ew-resize;height:100%;inset:0;margin:0;opacity:0;position:absolute;width:100%;z-index:4}.image-compare__slider:focus-visible+.image-compare__handle .image-compare__handle-line,.image-compare__slider[data-state~=focus-visible]+.image-compare__handle .image-compare__handle-line{background-color:var(--image-compare-handle-color-hover,var(--image-compare-handle-color-hover))}.image-compare:hover .image-compare__handle-line,.image-compare[data-state~=hover] .image-compare__handle-line{background-color:var(--image-compare-handle-color-hover,var(--image-compare-handle-color-hover))}.image-compare:hover .image-compare__handle-icon,.image-compare[data-state~=hover] .image-compare__handle-icon{transform:scale(1.1)}