:root{--x-before-after-position:50%;--x-start-position:50;--x-before-after-line:2px;--x-before-after-controlwidth:40px;--x-before-after-controllength:60px;--x-before-after-blur:0px;--x-before-after-touchheight:60px;--x-before-after-touchwidth:60px}[data-x-before-after]{width:100%;--x-before-after-position:calc(1% * var(--x-start-position))}component.x-before-after{width:100%;position:relative;--x-before-after-position:calc(1% * var(--x-start-position))}.brxe-xbeforeafterimage.x-before-after{position:relative}[data-x-before-after*=vertical]{--x-before-after-position:calc(100% - (1% * var(--x-start-position)))}component.x-before-after[data-x-before-after*=vertical]{--x-before-after-position:calc(100% - (1% * var(--x-start-position)))}.x-before-after_container{height:100%;position:relative;position:relative;overflow:hidden;height:100%;cursor:col-resize}[data-x-before-after*=vertical] .x-before-after_container{cursor:row-resize}.x-before-after-image_image{width:100%;height:100%;object-fit:cover;object-position:center}.x-before-after-image_image.brxe-image.tag{width:100%}.x-before-after_container>.x-before-after-image_block:nth-of-type(2){position:static;z-index:1;left:0}.x-before-after_container>.x-before-after-image_block:nth-of-type(1){position:absolute;right:0;top:0;z-index:1;clip-path:polygon(0 0,var(--x-before-after-position) 0,var(--x-before-after-position) 100%,0% 100%)}[data-x-before-after*=vertical] .x-before-after_container>.x-before-after-image_block:nth-of-type(1){clip-path:polygon(0 0,100% 0,100% calc(100% - var(--x-before-after-position)),0% calc(100% - var(--x-before-after-position)))}.x-before-after_container>.x-before-after-image_block:nth-of-type(1)>img,.x-before-after_container>.x-before-after-image_block:nth-of-type(1)>figure>img{position:absolute;height:100%;width:100%;right:0;left:auto;top:0}[data-x-before-after*=vertical] input{writing-mode:bt-lr;-webkit-appearance:slider-vertical}.x-before-after-image_block{height:100%}input[type="range"].x-before-after_slider{position:absolute;inset:0;cursor:col-resize;opacity:0;z-index:2;width:100%;height:100%}input[type=range].x-before-after_slider::-webkit-slider-thumb,input[type=range].x-before-after_slider::-moz-range-thumb,input[type=range].x-before-after_slider::-ms-thumb{height:var(--x-before-after-touchheight);width:var(--x-before-after-touchwidth)}[data-x-before-after*=vertical] input[type="range"].x-before-after_slider{cursor:row-resize}input.x-before-after_slider:focus-visible~.x-before-after_slider-button .x-before-after_slider-button-icon{border-color:currentColor}.slider:focus-visible~.slider-button{outline:5px solid #000;outline-offset:3px}.x-before-after_slider-line{position:absolute;inset:0;width:var(--x-before-after-line);background-color:#fff;z-index:10;left:var(--x-before-after-position);transform:translateX(-50%);pointer-events:none}.x-before-after_slider-line-before{top:0;bottom:calc(50% + ( var(--x-before-after-controllength) / 2 ))}.x-before-after_slider-line-after{top:calc(50% + ( var(--x-before-after-controllength) / 2 ));bottom:0}[data-x-before-after*=vertical] .x-before-after_slider-line{top:calc(100% - var(--x-before-after-position));width:calc(50% - ( var(--x-before-after-controllength) / 2 ));height:var(--x-before-after-line);transform:translateY(-50%)}[data-x-before-after*=vertical] .x-before-after_slider-line-before{left:0}[data-x-before-after*=vertical] .x-before-after_slider-line-after{right:0;left:auto}.x-before-after_slider-button{position:absolute;top:50%;left:var(--x-before-after-position);transform:translate(-50%,-50%);pointer-events:none;z-index:10}.x-before-after_slider-button-icon{width:var(--x-before-after-controlwidth);height:var(--x-before-after-controllength);display:flex;align-items:center;justify-content:center;background-color:#fff;border-radius:100vw;font-size:14px;backdrop-filter:blur(var(--x-before-after-blur));border:2px solid #fff0}[data-x-before-after*=vertical] .x-before-after_slider-button{top:calc(100% - var(--x-before-after-position));left:50%}[data-x-before-after*=vertical] .x-before-after_slider-button>*{transform:rotate(90deg)}.x-before-after_label{z-index:20;position:absolute;padding:10px;background:rgb(255 255 255 / .5)}