/*! image-comparison */.image-comparison{--percent: 50%;--button-touch: 44px;--button-line: 3px;--button-width: 28px;--button-height: 48px;--svg-width: 10px;border-radius:var(--rounded-block)}@media screen and (min-width:1024px){.image-comparison{--button-line: 4px;--button-width: 38px;--button-height: 64px;--svg-width: 12px}}.js .image-comparison{--percent: 10%}.js .image-comparison[animate]{--percent: 50%}@media(prefers-reduced-motion:reduce){.js .image-comparison,.js .image-comparison[animate]{--percent: 50%}}.image-comparison.animated .comparison__after{transition:clip-path var(--animation-smooth)}.image-comparison.animated .comparison__button{transition:var(--animation-smooth);transition-property:inset-block-start,inset-inline-start}.image-comparison[data-layout=horizontal] .comparison__after{clip-path:inset(0px 0px 0px var(--percent))}.image-comparison[data-layout=vertical] .comparison__after{clip-path:inset(var(--percent) 0px 0px 0px)}.comparison__button{color:currentColor;background:none;border:none}.image-comparison[data-layout=horizontal] .comparison__button{inset-block-start:0;inset-inline-start:var(--percent);height:100%;width:var(--button-touch);margin-inline-start:calc(var(--button-touch) / -2);cursor:col-resize}.image-comparison[data-layout=vertical] .comparison__button{inset-inline-start:0;inset-block-start:var(--percent);width:100%;height:var(--button-touch);margin-block-start:calc(var(--button-touch) / -2);cursor:row-resize}.comparison__button:before,.comparison__button:after{content:"";z-index:-1;position:absolute;background-color:rgb(var(--color-background))}.image-comparison[data-layout=horizontal] .comparison__button:before,.image-comparison[data-layout=horizontal] .comparison__button:after{width:var(--button-line);height:50%;inset-inline-start:50%;margin-inline-start:calc(var(--button-line) / -2)}.image-comparison[data-layout=vertical] .comparison__button:before,.image-comparison[data-layout=vertical] .comparison__button:after{width:50%;height:var(--button-line);inset-block-start:50%;margin-block-start:calc(var(--button-line) / -2)}.image-comparison[data-layout=horizontal] .comparison__button:before{inset-block-start:0}.image-comparison[data-layout=horizontal] .comparison__button:after{inset-block-end:0}.image-comparison[data-layout=vertical] .comparison__button:before{inset-inline-start:0}.image-comparison[data-layout=vertical] .comparison__button:after{inset-inline-end:0}.comparison__button span{inset-block-start:50%;inset-inline-start:50%;width:var(--button-width);height:var(--button-height);margin-inline-start:calc(var(--button-width) / -2);margin-block-start:calc(var(--button-height) / -2);border-radius:var(--rounded-full);background-color:rgb(var(--color-background))}.image-comparison[data-layout=vertical] .comparison__button span{transform:rotate(90deg)}.comparison__button svg{width:var(--svg-width)}.comparison__after .placeholder{background-color:rgb(var(--color-base-text)/ .6)}@media screen and (max-width:767px){.image-comparison:is(.media--adapt.mobile\:media--auto,.mobile\:media--adapt){height:auto}.image-comparison:is(.media--adapt.mobile\:media--auto,.mobile\:media--adapt) .media{height:0;padding-block-end:var(--ratio-percent)}}@media screen and (min-width:768px){.image-comparison.media--adapt .media{height:0;padding-block-end:var(--ratio-percent)}}.image-comparison.scrolling .comparison__box{opacity:0}.comparison__box{padding:clamp(var(--sp-5),2.105vw,var(--sp-10));color:rgb(var(--color-foreground));transition:opacity var(--animation-primary)}.comparison__box--center{align-items:center}.comparison__box--end{align-items:flex-end}.image-comparison[data-layout=vertical] .comparison__box{text-align:start;align-items:flex-end}.image-comparison[data-layout=vertical] .comparison__box--center{text-align:center}.image-comparison[data-layout=vertical] .comparison__box--end{text-align:end}.image-comparison[data-layout=vertical] .comparison__before .comparison__box{align-items:flex-start}[data-lazy-image] .image-comparison[data-layout=horizontal] .media.loading:before,[data-lazy-image] .image-comparison[data-layout=horizontal] .media.loading:after{inset-inline-start:calc(var(--percent) / 2)}[data-lazy-image] .image-comparison[data-layout=horizontal] .comparison__after .media.loading:before,[data-lazy-image] .image-comparison[data-layout=horizontal] .comparison__after .media.loading:after{inset-inline-start:calc(calc(100% - var(--percent)) / 2 + var(--percent))}[data-lazy-image] .image-comparison[data-layout=vertical] .media.loading:before,[data-lazy-image] .image-comparison[data-layout=vertical] .media.loading:after{inset-block-start:calc(var(--percent) / 2)}[data-lazy-image] .image-comparison[data-layout=vertical] .comparison__after .media.loading:before,[data-lazy-image] .image-comparison[data-layout=vertical] .comparison__after .media.loading:after{inset-block-start:calc(calc(100% - var(--percent)) / 2 + var(--percent))}
/*# sourceMappingURL=/cdn/shop/t/10/assets/component-image-comparison.css.map */