.image-compare{--text-container-outer:10%;--text-container-outer-large:14% }.image-compare.image-compare--image-right.image-compare--justify-left .image-compare__text-container-inner,.image-compare.image-compare--image-right.image-compare--justify-right .image-compare__text-container-inner{padding-left:0}.image-compare.image-compare--image-left.image-compare--justify-right .image-compare__text-container-inner,.image-compare.image-compare--image-left.image-compare--justify-left .image-compare__text-container-inner{padding-right:0}.image-compare__inner{display:flex;align-items:center}.image-compare__inner .image-compare__text-container,.image-compare__inner .image-compare__image-container{width:100%;height:100%}.image-compare--image-below .image-compare__inner{flex-direction:column}.image-compare--image-left .image-compare__inner{flex-direction:row-reverse}.image-compare--image-right .image-compare__inner{flex-direction:row}@media(max-width:719px){.image-compare .image-compare__inner{flex-direction:column}.image-compare__text-container{margin-bottom:20px}}.image-compare__text-container{display:flex;flex:.5;flex-direction:column;justify-content:center;text-align:var(--text-alignment);color:var(--color-text-section)}@media(min-width:720px){.image-compare--image-left .image-compare__text-container-inner,.image-compare--image-right .image-compare__text-container-inner{padding-right:var(--text-container-outer);padding-left:var(--text-container-outer)}}@media(min-width:1200px){.image-compare--image-left .image-compare__text-container-inner,.image-compare--image-right .image-compare__text-container-inner{padding-right:var(--text-container-outer-large);padding-left:var(--text-container-outer-large)}}@media(min-width:720px){.image-compare--image-left .image-compare__text-container-inner .section-introduction__subheading,.image-compare--image-right .image-compare__text-container-inner .section-introduction__subheading{margin-bottom:0}}.image-compare__image-container{position:relative;display:flex;flex:.5;max-width:var(--image-max-width);margin:0 auto;--position:50%}.image-compare__image-container-inner{position:relative;width:100%}.image-compare__image-container-inner .image-compare__image-after{position:absolute;top:0;right:0;bottom:0;left:0}.image-compare--horizontal .image-compare__image-container-inner .image-compare__image-after{-webkit-clip-path:inset(0 0 0 var(--position));clip-path:inset(0 0 0 var(--position))}.image-compare--vertical .image-compare__image-container-inner .image-compare__image-after{-webkit-clip-path:inset(calc(100% - var(--position)) 0 0 0);clip-path:inset(calc(100% - var(--position)) 0 0 0)}.image-compare__image--blur .image-compare__image{filter:blur(var(--filter-amount))}.image-compare__image--brightness .image-compare__image{filter:brightness(var(--filter-amount))}.image-compare__image--contrast .image-compare__image{filter:contrast(var(--filter-amount))}.image-compare__image--grayscale .image-compare__image{filter:grayscale(var(--filter-amount))}.image-compare__image--invert .image-compare__image{filter:invert(var(--filter-amount))}.image-compare__image--saturate .image-compare__image{filter:saturate(var(--filter-amount))}.image-compare__image--sepia .image-compare__image{filter:sepia(var(--filter-amount))}.image-compare__overlay{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;background:var(--overlay-background);background:var(--overlay-background-gradient, var(--overlay-background));opacity:var(--overlay-opacity)}.image-compare__image-wrapper{overflow:hidden}.image-compare__label-container-wrapper{display:flex;position:absolute;top:0;right:0;bottom:0;left:0;justify-content:var(--text-horizontal-position);align-items:var(--text-vertical-position);max-width:calc(1400px + 6.6vw);max-width:calc(var(--max-width) + calc(var(--space-outer) * 2));margin:0 auto;padding:8px;padding:var(--spacing-2) var(--spacing-2);color:var(--color-text)}@media(min-width:720px){.image-compare__label-container-wrapper{padding:12px;padding:var(--spacing-3) var(--spacing-3)}}.image-compare__label-container{background-color:var(--color-text-container);padding:4px 12px;padding:var(--spacing-1) var(--spacing-3);max-width:600px;transition:opacity .5s cubic-bezier(.33,0,0,1);transition:opacity var(--duration-normal) var(--easing)}.image-compare__slider{position:absolute;top:0;right:0;bottom:0;left:0;cursor:ew-resize;opacity:0;width:100%;height:100%}.image-compare--vertical .image-compare__slider{cursor:ns-resize;writing-mode:bt-lr;-webkit-appearance:slider-vertical}.image-compare__slider.focus-visible~.image-compare__slider-button{outline:2px solid;outline-offset:3px}.image-compare__slider:focus-visible~.image-compare__slider-button{outline:2px solid;outline-offset:3px}.image-compare__slider-line{position:absolute;background-color:var(--slider-color);pointer-events:none}.image-compare--horizontal .image-compare__slider-line{width:2px;height:100%;transform:translate(-50%);left:var(--position)}.image-compare--vertical .image-compare__slider-line{width:100%;height:2px;transform:translateY(50%);bottom:var(--position)}.image-compare__slider-button{height:40px;width:40px;position:absolute;display:grid;align-items:center;justify-items:center;place-items:center;background-color:var(--slider-color);color:#000;border-radius:50%;pointer-events:none;box-shadow:1px 1px 1px #08030380}.image-compare--horizontal .image-compare__slider-button{transform:translate(-50%,-50%);top:50%;left:var(--position)}.image-compare--horizontal .image-compare__slider-button .image-compare__slider-button-arrows{grid-template-columns:repeat(2,1fr)}.image-compare--horizontal .image-compare__slider-button .image-compare__slider-button-arrow-before .icon{transform:rotate(90deg)}.image-compare--horizontal .image-compare__slider-button .image-compare__slider-button-arrow-after .icon{transform:rotate(-90deg)}.image-compare--vertical .image-compare__slider-button{transform:translate(-50%,50%);left:50%;bottom:var(--position)}.image-compare--vertical .image-compare__slider-button .image-compare__slider-button-arrows{grid-template-rows:repeat(2,1fr)}.image-compare--vertical .image-compare__slider-button .image-compare__slider-button-arrow-before .icon{transform:rotate(180deg)}.image-compare__slider-button-arrows{display:grid;align-items:center;justify-items:center;place-items:center;height:20px;width:20px}.image-compare__slider-button-arrow{color:var(--slider-arrows-color);line-height:0}.image-compare__slider-button-arrow .icon{width:10px;height:10px;display:block}.image-compare__slider-button-arrow .icon svg{width:100%;height:100%;display:block}
/*# sourceMappingURL=/cdn/shop/t/175/assets/component-image-compare.css.map */