.before-after-wrapper{--drager-width: 50px;--drag-position: 50%;position:relative;overflow:hidden;height:100%;width:100%;display:block;-webkit-user-select:none;user-select:none}.before-after-main,.before-after-overlay{border-radius:var(--card-radius)}.before-after-overlay{position:absolute;top:0;bottom:0;left:0;right:0;z-index:1}.before-after-wrapper[data-layout=horizontal] .before-after-overlay{clip-path:inset(0 0 0 var(--drag-position))}.before-after-wrapper[data-layout=vertical] .before-after-overlay{clip-path:inset(var(--drag-position) 0 0 0)}.before-after-drag{position:absolute;z-index:1;display:block;transition-property:inset-block-start,inset-inline-start}.before-after-drag.drag-horizontal{top:0;bottom:0;width:1px;height:100%;inset-inline-start:var(--drag-position)}.before-after-drag.drag-vertical{left:0;right:0;width:100%;height:1px;inset-block-start:var(--drag-position)}.before-after-drag-cursor{aspect-ratio:1 / 1.6;width:var(--drager-width);border-radius:100px;display:flex;align-items:center;justify-content:center;padding:0;position:absolute;top:50%;left:50%;color:var(--slider-arrow-color);background-color:var(--slider-arrow-bg)}.before-after-drag.drag-horizontal .before-after-drag-cursor{transform:translate(-50%,-50%);cursor:col-resize}.before-after-drag.drag-vertical .before-after-drag-cursor{cursor:row-resize;transform:translate(-50%,-50%) rotate(90deg)}.before-after-drag-cursor svg{width:11px;height:auto}.before-after-drag-button-point{display:inline-block;padding:6px 10px;min-width:100px;text-align:center}.before-after-drag-button-point.active{background:var(--text_color);color:var(--body-background)}.before-after-drag:before,.before-after-drag:after{content:"";position:absolute;cursor:none;background-color:var(--slider-arrow-bg)}.before-after-drag.drag-horizontal:before,.before-after-drag.drag-horizontal:after{width:2px;height:50%;left:50%;transform:translate(-50%)}.before-after-drag.drag-vertical:before,.before-after-drag.drag-vertical:after{width:50%;height:2px;top:50%;transform:translateY(-50%)}.before-after-drag.drag-horizontal:before{inset-block-start:0}.before-after-drag.drag-horizontal:after{inset-block-end:0}.before-after-drag.drag-vertical:before{inset-inline-start:0}.before-after-drag.drag-vertical:after{inset-inline-end:0}.before-after-drag-cursor:after{content:"";background-color:var(--slider-arrow-bg);position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1;border-radius:100px;transform:scale(1.4);opacity:.25}.before-after-content{position:absolute;width:100%;height:100%;top:0;display:flex;flex-wrap:wrap;flex-direction:column;justify-content:flex-end;padding:20px;max-width:100%}.before-after-overlay .before-after-content{right:0;align-items:flex-end}.before-after-title-arrow{--svg-wrapper-size: 38px;background:var(--button-background);border-radius:100%;color:var(--button-text);margin-left:10px}.before-after-title-arrow svg{width:14px;height:auto;transition:.4s ease}.before-after-tag,.before-after-title{color:var(--media-overlay-heading)}.before-after-title{margin-top:12px}.before-after-title a{display:flex;align-items:center}.before-after-wrapper[data-layout=vertical] .before-after-main .before-after-content{align-items:flex-start;justify-content:flex-start}.before-after-wrapper[data-layout=horizontal] .before-after-tag.after-tag{inset-inline-start:var(--drag-position)}.before-after-wrapper[data-layout=vertical] .before-after-tag.after-tag{margin-block-start:16px;inset-block-start:var(--drag-position)}.text-tilt{will-change:transform;transform:rotate(-7deg);color:rgba(var(--highlight-color));background-color:rgba(var(--highlight-background));border-radius:49px;overflow:hidden;display:inline-block;padding:0 20px}.image-comparison-head{height:50vh;display:flex;align-items:center;background:var(--body-alternate-background)}.image-comparison-body{padding-top:50px}.before-after-wrapper{margin-top:40px}@media (max-width:767px){.before-after-wrapper{--drager-width: 30px}.before-after-drag-cursor svg{width:8px}}@media (min-width:768px){.before-after-content{padding:30px;max-width:50%}}@media (min-width:1025px){.before-after-title:hover .before-after-title-arrow{background:var(--button-background-hover);color:var(--button-text-hover)}.before-after-title:hover .before-after-title-arrow svg{transform:rotate(-45deg)}}
/*# sourceMappingURL=/cdn/shop/t/2/assets/image-comparison.css.map */