.before-after{display:block;position:relative;width:100%;align-self:stretch;overflow:hidden;border-radius:var(--ba-radius, var(--input-border-radius, 0));touch-action:none}.before-after__frame{position:relative;width:100%}.before-after__img{display:block;width:100%;height:auto}.before-after__before,.before-after__after{position:absolute;top:0;right:0;bottom:0;left:0}.before-after__before .before-after__img,.before-after__after .before-after__img,.before-after__before>svg,.before-after__after>svg{width:100%;height:100%;object-fit:cover}.before-after__after{clip-path:inset(0 0 0 var(--ba-pos, 50%))}.before-after--vertical .before-after__after{clip-path:inset(var(--ba-pos, 50%) 0 0 0)}.before-after__line{position:absolute;top:0;bottom:0;left:var(--ba-pos, 50%);width:2px;margin-left:-1px;background-color:var(--ba-line-color, #fff);pointer-events:none}.before-after--vertical .before-after__line{top:var(--ba-pos, 50%);right:0;bottom:auto;left:0;width:auto;height:2px;margin:-1px 0 0}.before-after__grip{display:flex;position:absolute;top:50%;left:var(--ba-pos, 50%);align-items:center;justify-content:center;width:var(--ba-grip-size, 44px);height:var(--ba-grip-size, 44px);border:2px solid var(--ba-line-color, #fff);border-radius:50%;background-color:var(--ba-grip-bg, transparent);color:var(--ba-line-color, #fff);transform:translate(-50%,-50%);pointer-events:none}.before-after--vertical .before-after__grip{top:var(--ba-pos, 50%);left:50%}.before-after__grip .icon{width:12px;height:12px}.before-after__grip .icon:first-child{margin-inline-end:1px}.before-after--vertical .before-after__grip .icon{transform:rotate(90deg)}.before-after__range{appearance:none;-webkit-appearance:none;position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;margin:0;padding:0;border:0;background:transparent;cursor:col-resize;touch-action:pan-y;-webkit-tap-highlight-color:transparent}.before-after--vertical .before-after__range{writing-mode:vertical-lr;cursor:row-resize;touch-action:pan-x}.before-after__range::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:1px;height:1px;border:0;border-radius:0;box-shadow:none;background:transparent;cursor:inherit}.before-after__range::-moz-range-thumb{width:1px;height:1px;border:0;border-radius:0;box-shadow:none;background:transparent;cursor:inherit}.before-after__range:focus-visible{outline:2px solid var(--ba-line-color, #fff);outline-offset:-4px}.before-after__label{position:absolute;z-index:2;padding:calc(1.5 * var(--space-unit)) calc(3 * var(--space-unit));border-radius:var(--input-border-radius, 0);background-color:var(--ba-label-bg, rgba(0, 0, 0, .45));color:var(--ba-label-text, #fff);font-size:var(--ba-label-size, 1.3rem);line-height:1.3;pointer-events:none}.before-after__label--before{bottom:var(--ba-label-inset, calc(4 * var(--space-unit)));left:var(--ba-label-inset, calc(4 * var(--space-unit)))}.before-after__label--after{right:var(--ba-label-inset, calc(4 * var(--space-unit)));bottom:var(--ba-label-inset, calc(4 * var(--space-unit)))}.before-after--vertical .before-after__label--before{top:var(--ba-label-inset, calc(4 * var(--space-unit)));bottom:auto}.before-after--vertical .before-after__label--after{right:auto;left:var(--ba-label-inset, calc(4 * var(--space-unit)))}@media(prefers-reduced-motion:reduce){.before-after__grip{transition:none}}.rte .before-after--inline{margin-block:1.5em}.rte .before-after--inline .before-after__img{padding:0;margin:0;max-width:none}
/*# sourceMappingURL=/cdn/shop/t/114/assets/before-after.css.map */