.before-after{position:relative;overflow:hidden;cursor:ew-resize;-webkit-user-select:none;user-select:none;aspect-ratio:16/9;border-radius:var(--border-radius)}.before-after--vertical{cursor:ns-resize}.before-after__before-image,.before-after__after-image{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden}.before-after__before-image{width:var(--before-after-initial-cursor-position, 50%);z-index:2}.before-after__after-image{z-index:1}.before-after__before-image img,.before-after__after-image img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}.before-after__content-wrapper{position:absolute;bottom:2rem;left:2rem;right:2rem;z-index:3;background:#ffffffe6;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:1.5rem;border-radius:8px;border:1px solid rgba(255,255,255,.2);display:flex;flex-direction:column;gap:1rem}.before-after__text{margin:0;font-size:1.6rem;font-weight:600;line-height:1.3}.before-after__button{display:inline-block;text-decoration:none;font-weight:500;transition:all .2s ease}.before-after__button.button{padding:1rem 2rem;background:rgba(var(--color-button),1);color:rgba(var(--color-button-text),1);border-radius:4px;border:none}.before-after__button.button--outline{background:transparent;color:rgba(var(--color-foreground),1);border:1px solid rgba(var(--color-foreground),.3)}.before-after__button.link{color:rgba(var(--color-foreground),1);text-decoration:underline}.before-after__button:hover{opacity:.8}.before-after__cursor{position:absolute;top:0;left:var(--before-after-initial-cursor-position, 50%);transform:translate(-50%);width:4px;height:100%;z-index:10;display:flex;align-items:center;justify-content:center;cursor:ew-resize}.before-after--vertical .before-after__cursor{top:var(--before-after-initial-cursor-position, 50%);left:0;width:100%;height:4px;transform:translateY(-50%);cursor:ns-resize;flex-direction:row}.before-after__cursor:before{content:"";position:absolute;top:0;left:50%;width:2px;height:100%;background:var(--before-after-cursor-background, #ffffff);transform:translate(-50%);box-shadow:0 0 0 1px #0000001a}.before-after--vertical .before-after__cursor:before{top:50%;left:0;width:100%;height:2px;transform:translateY(-50%)}.before-after__cursor svg{position:relative;z-index:11;filter:drop-shadow(0 2px 4px rgba(0,0,0,.1));transition:transform .2s ease}.before-after__cursor:hover svg{transform:scale(1.1)}.before-after__cursor:focus{outline:2px solid var(--color-outline);outline-offset:2px}.before-after--vertical .before-after__before-image{width:100%;height:var(--before-after-initial-cursor-position, 50%)}.before-after--vertical .before-after__before-image img,.before-after--vertical .before-after__after-image img{width:100%;height:100%}@media screen and (max-width: 749px){.before-after__cursor svg{width:40px;height:40px}.before-after__content-wrapper{bottom:1rem;left:1rem;right:1rem;padding:1rem}.before-after__cursor:before{width:1px}.before-after--vertical .before-after__cursor:before{width:100%;height:1px}}@media (hover: none){.before-after__cursor:hover svg{transform:none}.before-after__cursor svg{width:44px;height:44px}}@media (prefers-contrast: high){.before-after__cursor:before{box-shadow:0 0 0 2px #000}.before-after__content-wrapper{background:#fff;border:2px solid rgba(0,0,0,1)}}@media (prefers-reduced-motion: reduce){.before-after__cursor svg{transition:none}}.before-after .placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:var(--gradient-background);color:rgba(var(--color-foreground),.5)}.before-after .placeholder svg{width:48px;height:48px}
/*# sourceMappingURL=/cdn/shop/t/62/assets/component-before-after.css.map */