.before-after{--before-after-position: 50;position:relative;display:block;width:100%;height:100%;overflow:hidden}.before-after__pane{position:absolute;top:0;right:0;bottom:0;left:0}.before-after__pane img{display:block;width:100%;height:100%;object-fit:cover;object-position:center center}.before-after__pane--after{clip-path:inset(0 0 0 calc(var(--before-after-position) * 1%))}.before-after__divider{position:absolute;top:0;bottom:0;left:calc(var(--before-after-position) * 1%);z-index:2;width:2px;margin-left:-1px;background-color:rgb(var(--color-background));box-shadow:0 0 0 1px rgba(var(--color-shadow),.15);pointer-events:none}.before-after__handle{position:absolute;top:50%;left:50%;display:flex;align-items:center;justify-content:center;width:4.4rem;height:4.4rem;border-radius:50%;background-color:rgb(var(--color-background));color:rgb(var(--color-foreground));box-shadow:0 .4rem 1.6rem rgba(var(--color-shadow),.28);transform:translate(-50%,-50%);transition:transform .2s ease}.before-after__arrows{width:2.4rem;height:2.4rem}.before-after.is-dragging .before-after__handle{transform:translate(-50%,-50%) scale(1.08)}.before-after__label{position:absolute;top:1.6rem;z-index:2;padding:.5rem 1.2rem;border-radius:10rem;background-color:rgba(var(--color-background),.9);color:rgb(var(--color-foreground));font-size:1.2rem;line-height:1.2;letter-spacing:.1em;text-transform:uppercase;pointer-events:none;transition:opacity .2s ease}.before-after__label--before{left:1.6rem;opacity:clamp(0,calc((var(--before-after-position) - 10) / 12),1)}.before-after__label--after{right:1.6rem;opacity:clamp(0,calc((90 - var(--before-after-position)) / 12),1)}.before-after__range{position:absolute;top:0;right:0;bottom:0;left:0;z-index:3;width:100%;height:100%;margin:0;padding:0;border:0;background:transparent;cursor:ew-resize;-webkit-appearance:none;appearance:none;touch-action:pan-y}.before-after__range::-webkit-slider-thumb{width:1px;height:100%;background:transparent;border:0;cursor:ew-resize;-webkit-appearance:none;appearance:none}.before-after__range::-moz-range-thumb{width:1px;height:100%;background:transparent;border:0;border-radius:0;cursor:ew-resize}.before-after__range::-moz-range-track{background:transparent}.before-after__range:focus{outline:none}.before-after__range:focus-visible{outline:2px solid rgb(var(--color-foreground));outline-offset:-4px}.no-js .before-after__range,.no-js .before-after__handle{display:none}@media(prefers-reduced-motion:reduce){.before-after__handle,.before-after__label{transition:none}}
/*# sourceMappingURL=/cdn/shop/t/45/assets/component-before-after.css.map */