before-after{display:block}.comparison__frame{position:relative;overflow:hidden;border-radius:var(--ui-radius);aspect-ratio:var(--comparison-ratio, 1);touch-action:pan-y}.comparison__image{display:block;width:100%;height:100%;object-fit:cover}.comparison__overlay{position:absolute;top:0;right:0;bottom:0;left:0;clip-path:inset(0 calc(100% - var(--comparison-position, 50%)) 0 0)}.comparison__label{position:absolute;top:var(--ui-space);padding:.4rem 1rem;font-size:var(--ui-text-sm);font-weight:600;border-radius:var(--ui-radius-pill);background:var(--ui-surface);color:var(--ui-ink);pointer-events:none}.comparison__label--before{inset-inline-start:var(--ui-space)}.comparison__label--after{inset-inline-end:var(--ui-space)}.comparison__handle{position:absolute;top:0;bottom:0;left:var(--comparison-position, 50%);transform:translate(-50%);width:.3rem;background:var(--ui-surface);pointer-events:none;display:flex;align-items:center;justify-content:center}.comparison--bar .comparison__handle-grip{display:none}.comparison__handle-grip{display:flex;align-items:center;justify-content:center;gap:.1rem;width:4rem;height:4rem;border-radius:50%;background:var(--ui-surface);color:var(--ui-ink);box-shadow:var(--ui-shadow-lifted)}.comparison__handle-grip svg{width:1rem;height:1rem}.comparison__handle-grip svg:first-child{transform:rotate(90deg)}.comparison__handle-grip svg:last-child{transform:rotate(-90deg)}.comparison__range{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;background:transparent}.comparison__range:focus-visible{outline:none}.comparison__frame:has(.comparison__range:focus-visible) .comparison__handle-grip{outline:.3rem solid var(--ui-focus-ring);outline-offset:.2rem}.comparison__range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:4rem;height:4rem;cursor:ew-resize}.comparison__range::-moz-range-thumb{width:4rem;height:4rem;border:0;background:transparent;cursor:ew-resize}.comparison__empty{margin:0;padding:var(--ui-space-xl);text-align:center;color:var(--ui-ink-faint);border:.1rem dashed var(--ui-rule-strong);border-radius:var(--ui-radius)}
/*# sourceMappingURL=/cdn/shop/t/57/assets/component-before-after.css.map */