.image-compare-section{display:block;background-color:rgba(var(--color-background),1);background-image:var(--color-background-gradient);color:rgba(var(--color-text),1)}.image-compare{display:block;position:relative;overflow:hidden;border-radius:var(--border-radius);cursor:col-resize}.image-compare picture{display:block;width:100%;height:auto}.image-compare-before{display:flex}.image-compare-before img,.image-compare-before .placeholder-svg{display:block;width:100%;height:auto}.image-compare-after{display:flex;position:absolute;overflow:hidden;top:0;left:var(--slider-position, 50%);width:100%;height:100%}.image-compare-after img,.image-compare-after .placeholder-svg{display:block;width:100%;height:auto;transform:translate(calc(var(--slider-position, 50%) * -1))}.image-compare-line{position:absolute;top:0;left:var(--slider-position, 50%);width:2px;height:100%;background:rgba(var(--color-background),1);pointer-events:none;transform:translate(-50%)}.image-compare-handle{position:absolute;top:50%;left:50%;width:3rem;height:3rem;background-color:rgba(var(--color-background),.15);border:2px solid rgba(var(--color-background),1);color:rgba(var(--color-background),1);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border-radius:50%;transform:translate(-50%,-50%);pointer-events:none}.image-compare-handle:focus-visible{outline:2px solid rgba(var(--color-text),.75)}.image-compare-handle .svg-icon-chevron-left{position:absolute;left:5%;top:50%;transform:translateY(-50%);transition:all .2s ease-out}.image-compare:hover .image-compare-handle .svg-icon-chevron-left{left:0}.image-compare-handle .svg-icon-chevron-right{position:absolute;right:5%;top:50%;transform:translateY(-50%);transition:all .2s ease-out}.image-compare:hover .image-compare-handle .svg-icon-chevron-right{right:0}.image-compare-label{position:absolute;bottom:1rem;color:rgba(var(--color-background),1);background-color:rgba(var(--color-text),.25);border:none;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.image-compare-before .image-compare-label{left:1rem}.image-compare-after .image-compare-label{right:calc(1rem + var(--slider-position, 50%))}@media (max-width: 1199px){.image-compare-section{padding-top:calc(var(--padding-top) * .75);padding-bottom:calc(var(--padding-bottom) * .75)}}@media (min-width: 1200px){.image-compare-section{padding-top:calc(var(--padding-top) * 1);padding-bottom:calc(var(--padding-bottom) * 1)}}
/*# sourceMappingURL=/cdn/shop/t/9/assets/image-compare.css.map */