image-compare-container{position:relative}image-compare-container .image-container{position:absolute;width:100%;height:100%;left:50%;top:50%;transform:translate3d(-50%,-50%,0);overflow:hidden}image-compare-container .label-image{position:absolute;bottom:2rem;left:2rem;z-index:10;display:inline-block;background-color:rgba(var(--color-foreground),.7);color:rgb(var(--color-background));font-size:1.4rem;padding:.3rem .5rem;opacity:0;transform:scale(0);transition:all .3s ease-in-out}image-compare-container .label-image.label-image--after{left:auto;right:2rem}image-compare-container .image-container:hover .label-image{opacity:1;transform:scale(1)}image-compare-container .before-image,image-compare-container .after-image{display:block;max-width:100%;height:100%;position:absolute;top:0;left:0;pointer-events:none;overflow:hidden}image-compare-container .before-image img,image-compare-container .before-image .placeholder-svg,image-compare-container .after-image img,image-compare-container .after-image .placeholder-svg{height:100%;object-fit:contain;object-position:0 center}image-compare-container .placeholder__media{height:100%;position:absolute;left:0;top:0;width:100%;background:#f6f6f6}image-compare-container .scroller{width:3rem;height:3rem;position:absolute;top:50%;transform:translateY(-50%);border-radius:50%;background-color:transparent;opacity:.9;pointer-events:auto;cursor:pointer}image-compare-container .scroller:hover{opacity:1}image-compare-container .scrolling{pointer-events:none;opacity:1;z-index:1}image-compare-container .scroller__thumb{width:100%;height:100%;padding:.3rem;color:rgb(var(--color-background));border-radius:100%;box-shadow:0 0 0 .1rem rgba(var(--color-foreground),.05)}image-compare-container .scroller:before,image-compare-container .scroller:after{content:" ";display:block;width:.3rem;height:9999px;position:absolute;left:50%;margin-left:-.15rem;z-index:30;transition:.1s;box-shadow:0 0 0 .1rem rgba(var(--color-foreground),.05)}image-compare-container .scroller:before{top:100%}image-compare-container .scroller:after{bottom:100%}image-compare-container .scroller{border:.3rem solid rgb(var(--color-background))}image-compare-container .scroller:before,image-compare-container .scroller:after{background-color:rgb(var(--color-background))}
/*# sourceMappingURL=/cdn/shop/t/2/assets/component-zmz-image-compare-container.css.map */