.image-comparison--media--adapt.placeholder{height:30rem}.image--comparison__after.placeholder_svg_parent{background:rgba(var(--color-foreground),.3)}.image--comparison-wrapper{position:relative;display:block;overflow:hidden}.image--comparison__after{position:absolute;z-index:1;width:100%;height:100%;left:0;top:0;clip-path:inset(0px 0px 0px var(--percent))}.image-comparison--media .placeholder-svg{position:absolute;top:50%;transform:translateY(-50%);left:0}.image-comparison__button{position:absolute;z-index:2;color:inherit;background-color:transparent;border:none;padding:0;cursor:pointer;top:0;left:var(--percent);width:2.8rem;height:100%;margin-left:-1.4rem;cursor:col-resize;transition:unset}.image-comparison__button span{position:absolute;top:50%;left:50%;width:5rem;height:5rem;margin-left:-2.5rem;margin-top:-2.4rem;border-radius:4rem;background-color:rgba(var(--color-background));pointer-events:none;display:flex;align-items:center;justify-content:center;box-shadow:0 0 .5rem .15rem rgba(var(--color-foreground),.1);color:rgba(var(--color-foreground));gap:1rem}.image-comparison__button .icon{height:1.6rem;width:auto}.image-comparison__button span svg{width:1rem}.image-comparison__button:before,.image-comparison__button:after{content:"";position:absolute;background-color:rgba(var(--color-background));pointer-events:none}.image-comparison__button:before{top:0;margin-top:-2rem;width:.3rem;height:50%;left:50%;margin-left:-.15rem}.image-comparison__button:after{bottom:0;margin-bottom:-2rem;width:.3rem;height:50%;left:50%;margin-left:-.15rem}.image-comparison--media--small{height:28rem}.image-comparison--media--medium{height:35rem}.image-comparison--media--large{height:43.5rem}@media screen and (min-width: 750px){.image-comparison--media--small{height:31.4rem}.image-comparison--media--medium{height:50rem}.image-comparison--media--large{height:69.5rem}.image-comparison--media--adapt.placeholder{height:50rem}}.image--comparison__after .placeholder_svg_parent{background:rgba(var(--color-background));z-index:9;width:100%;height:100%;color:rgba(var(--color-foreground))}.image--comparison__after .placeholder_svg_parent>svg{fill:rgba(var(--color-foreground))}.image--comparison__after .media{height:100%}html[dir=rtl] .image-comparison__button span svg{transform:rotate(-180deg)}
/*# sourceMappingURL=/cdn/shop/t/3/assets/image-comparison.css.map */