.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;touch-action:none}.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}.before-after-actions{margin-top:1.6rem;display:flex;justify-content:center}.slider:focus-visible .slider-button,.slider:hover .slider-button{box-shadow:0 0 0 3px #ff5b0029,0 9px 12px rgba(var(--color-foreground)/ .12)}@media screen and (max-width:749px){.slider-button{width:42px;height:42px;left:-21px}.before-after-image__badge{top:1.2rem!important;left:1.2rem!important;right:auto!important;padding:.5rem 1rem}.before-after-image.after .before-after-image__badge{left:auto!important;right:1.2rem!important}}
/*# sourceMappingURL=/cdn/shop/t/60/assets/before-after-image.css.map */