.image-compare{--image-compare-position: 50%;--image-compare-divider-width: .2rem;--image-compare-handle-size: 4.4rem;position:relative;display:block;overflow:hidden;cursor:ew-resize;touch-action:pan-y;-webkit-user-select:none;user-select:none}.image-compare__images,.image-compare__image{position:absolute;top:0;left:0;height:100%;width:100%}.image-compare__image img,.image-compare__image svg,.image-compare__badge{pointer-events:none;-webkit-user-drag:none}.image-compare__image img,.image-compare__image svg{display:block;height:100%;width:100%;object-fit:cover}.image-compare__image--before{clip-path:inset(0 calc(100% - var(--image-compare-position)) 0 0);z-index:1}[dir=rtl] .image-compare__image--before{clip-path:inset(0 0 0 calc(100% - var(--image-compare-position)))}.image-compare__handle{position:absolute;top:0;bottom:0;inset-inline-start:var(--image-compare-position);width:var(--image-compare-divider-width);margin-inline-start:calc(var(--image-compare-divider-width) / -2);background-color:rgb(var(--color-background));pointer-events:none;z-index:2}.image-compare__handle-circle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;height:var(--image-compare-handle-size);width:var(--image-compare-handle-size);border-radius:50%;background-color:rgb(var(--color-background));color:rgb(var(--color-foreground));box-shadow:0 0 .6rem rgba(var(--color-foreground),.25);pointer-events:auto;cursor:grab;touch-action:none;transition:transform var(--duration-short) ease,box-shadow var(--duration-short) ease}.image-compare:hover .image-compare__handle-circle{transform:translate(-50%,-50%) scale(1.08);box-shadow:0 0 1rem rgba(var(--color-foreground),.35)}.image-compare--dragging .image-compare__handle-circle{transform:translate(-50%,-50%) scale(1.08);cursor:grabbing}.image-compare__handle-circle svg{height:1.6rem;width:1.6rem}.image-compare__range{position:absolute;top:0;left:0;height:100%;width:100%;margin:0;padding:0;border:0;background:transparent;opacity:0;pointer-events:none;-webkit-appearance:none;appearance:none}.image-compare__range:focus-visible~.image-compare__handle .image-compare__handle-circle{outline:.2rem solid rgba(var(--color-foreground),.5);outline-offset:.3rem}.image-compare__badge{position:absolute;top:1.2rem;z-index:1;max-width:calc(100% - 2.4rem);padding:.4rem 1.2rem;border-radius:var(--badge-corner-radius, 0);font-size:1.2rem;letter-spacing:.06rem;line-height:1.4;text-transform:uppercase;overflow-wrap:break-word}.image-compare__badge--before{inset-inline-start:1.2rem;background-color:var(--image-compare-badge-before-background, rgb(var(--color-background)));color:var(--image-compare-badge-before-color, rgb(var(--color-foreground)))}.image-compare__badge--after{inset-inline-end:1.2rem;background-color:var(--image-compare-badge-after-background, rgb(var(--color-background)));color:var(--image-compare-badge-after-color, rgb(var(--color-foreground)))}@media screen and (min-width:750px){.image-compare__badge{top:1.6rem}.image-compare__badge--before{inset-inline-start:1.6rem}.image-compare__badge--after{inset-inline-end:1.6rem}}.image-compare__image--before,.image-compare__handle{transition:clip-path var(--duration-default) cubic-bezier(.4,0,.2,1),inset-inline-start var(--duration-default) cubic-bezier(.4,0,.2,1)}.image-compare--dragging .image-compare__image--before,.image-compare--dragging .image-compare__handle{transition:none}.image-compare--dragging .image-compare__image--before{will-change:clip-path}@media(prefers-reduced-motion:reduce){.image-compare__image--before,.image-compare__handle,.image-compare__handle-circle{transition:none}}
/*# sourceMappingURL=/cdn/shop/t/40/assets/component-image-compare-slider.css.map */