.before-after-compare{display:block;width:100%}.before-after-compare__frame{position:relative;width:100%;overflow:hidden;background-color:var(--color-surface-hover);user-select:none;-webkit-user-select:none}.before-after-compare__image{position:absolute;top:0;right:0;bottom:0;left:0}.before-after-compare__image .media,.before-after-compare__image .banner-media{height:100%}.before-after-compare__image .media__img{width:100%;height:100%;object-fit:cover}.before-after-compare__image--after{z-index:1}.before-after-compare__image--before{z-index:2;clip-path:inset(0 calc(100% - var(--reveal) * 1%) 0 0);transition:clip-path var(--duration-base) var(--ease-out-expo)}.before-after-compare--orient-y .before-after-compare__image--before{clip-path:inset(0 0 calc(100% - var(--reveal) * 1%) 0)}.before-after-compare.is-dragging .before-after-compare__image--before{transition:none}.before-after-compare__divider{position:absolute;z-index:3;background-color:var(--color-background);pointer-events:none;transition:left var(--duration-base) var(--ease-out-expo),top var(--duration-base) var(--ease-out-expo)}.before-after-compare:not(.before-after-compare--orient-y) .before-after-compare__divider{top:0;bottom:0;left:calc(var(--reveal) * 1%);width:2px;transform:translate(-1px)}.before-after-compare--orient-y .before-after-compare__divider{left:0;right:0;top:calc(var(--reveal) * 1%);height:2px;transform:translateY(-1px)}.before-after-compare.is-dragging .before-after-compare__divider{transition:none}.before-after-compare__handle{position:absolute;z-index:4;display:inline-flex;align-items:center;justify-content:center;width:var(--touch-target);height:var(--touch-target);border:2px solid var(--color-background);border-radius:var(--radius-full);background-color:var(--color-background);color:var(--color-foreground);box-shadow:var(--shadow-md);cursor:grab;touch-action:none;transition:left var(--duration-base) var(--ease-out-expo),top var(--duration-base) var(--ease-out-expo)}.before-after-compare:not(.before-after-compare--orient-y) .before-after-compare__handle{top:50%;left:calc(var(--reveal) * 1%);transform:translate(-50%,-50%)}.before-after-compare--orient-y .before-after-compare__handle{top:calc(var(--reveal) * 1%);left:50%;transform:translate(-50%,-50%) rotate(90deg)}.before-after-compare.is-dragging .before-after-compare__handle{cursor:grabbing;transition:none}.before-after-compare__handle:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.before-after-compare__label{position:absolute;z-index:3;padding:var(--space-2) var(--space-3);background-color:var(--color-background);color:var(--color-foreground);font-size:var(--font-size-caption);letter-spacing:var(--letter-spacing-eyebrow);text-transform:uppercase;pointer-events:none}.before-after-compare__label--before{top:var(--space-3);left:var(--space-3)}.before-after-compare__label--after{top:var(--space-3);right:var(--space-3)}.before-after-compare--orient-y .before-after-compare__label--after{top:auto;right:auto;bottom:var(--space-3);left:var(--space-3)}
/*# sourceMappingURL=/cdn/shop/t/5/assets/component-before-after.css.map */