.before-after-container{position:relative;width:100%;margin:0 auto;overflow:hidden;-webkit-user-select:none;user-select:none}.before-after-image{width:100%;overflow:hidden}.before-after-image img{width:100%;display:block;height:100%;object-fit:cover;position:absolute;top:0;right:0;bottom:0;left:0}.before-after-image.after{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;clip-path:inset(0 0 0 var(--clip-path-percent));z-index:1}.before-after-image.before .hero-placeholder-svg{position:absolute;top:0;right:0;bottom:0;left:0}.before-after-image.before .placeholder_svg{background-color:rgba(var(--color-foreground)/ .2)}.slider{position:absolute;top:0;bottom:0;left:var(--slider-position);width:2px;background:rgba(var(--color-background)/ 1);cursor:ew-resize;margin-left:-1px;z-index:2}.slider-button{position:absolute;top:50%;left:-24px;width:48px;height:48px;background:rgb(var(--color-background));border-radius:50%;transform:translateY(-50%);cursor:ew-resize;box-shadow:0 9px 12px rgba(var(--color-foreground)/ .1)}.before-after-container.transition .before-after-image.after{transition:clip-path .5s ease-in-out}.before-after-container.transition .slider{transition:left .5s ease-in-out}.before-after-container.transition-faster .before-after-image.after{transition:clip-path .15s ease}.before-after-container.transition-faster .slider{transition:left .15s ease}.before .before-after-image__badge{z-index:1}.before-after-image__badge{background:rgba(var(--color-background)/ .9);color:rgb(var(--color-foreground));border-radius:var(--btn-border-radius);z-index:2}
/*# sourceMappingURL=/cdn/shop/t/6/assets/before-after-image.css.map */