before-n-after{position:relative;overflow:hidden;display:block;margin:0 auto}before-n-after .placeholder-image{padding-top:calc(100% / var(--aspect-ratio))}before-n-after .before-image,before-n-after .after-image{-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-o-user-select:none;user-select:none;pointer-events:none}before-n-after .after-image{position:absolute;top:0;right:0;width:50%;height:100%;overflow:hidden}before-n-after .after-image__wrapper{position:absolute;top:0;right:0;overflow:hidden}before-n-after .before-image__label,before-n-after .after-image__label{position:absolute;bottom:0;margin:1rem;font-size:1em;border-radius:var(--btn-border-radius);-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-o-user-select:none;user-select:none;color:#fff;pointer-events:none}before-n-after .before-image__wrapper:has(img) .before-image__label:before,before-n-after .after-image__wrapper:has(img) .after-image__label:before{content:"";position:absolute;top:-100px;right:-200px;bottom:-100px;left:-200px;background:radial-gradient(var(--image-overlay-shadow-start) 0%,transparent 70%);pointer-events:none}before-n-after .before-image__label{left:0}before-n-after .after-image__label{right:0}before-n-after .before-image__label.valign-top,before-n-after .after-image__label.valign-top{top:0;bottom:inherit}before-n-after .divider{height:40px;width:40px;position:absolute;left:50%;top:50%;border:2px solid #fff;border-radius:100%;z-index:20;background-color:#fff;box-shadow:0 0 10px var(--image-overlay-shadow-start);transform:translate(-50%,-50%);display:flex;align-items:center;cursor:grab}before-n-after.is-grabbing,before-n-after .divider.is-grabbing{cursor:grabbing}before-n-after .divider:before,before-n-after .divider:after{content:"";width:2px;background:#fff;height:100vh;position:absolute;left:50%;transform:translate(-50%)}before-n-after .divider:before{bottom:50%;margin-bottom:20px}before-n-after .divider:after{top:50%;margin-top:20px}before-n-after .divider__arrow{width:50%}before-n-after .divider__arrow svg{width:100%}
/*# sourceMappingURL=/cdn/shop/t/144/assets/before-n-after.css.map */