.banner-wrapper--before-after{--thumb-size: 5rem;--picker-background: var(--clr-theme-background);--picker-color: var(--clr-theme-accent);--picker-animation-duration: .2s;--before-after-value: calc( (var(--thumb-size) / 2) + ((100% - var(--thumb-size)) / 100 * var(--before-after-progress, 50)) );overflow:hidden}.banner__before-after{position:absolute;left:0;right:0;top:0;bottom:0;border-radius:var(--images-border-radius);z-index:4}.banner-wrapper input[type=range]{display:block;position:absolute;top:0;left:0;width:100%;height:100%;background:transparent;opacity:0;cursor:pointer;z-index:9;-webkit-appearance:none;appearance:none}@media (hover: hover) and (pointer: fine){.before-after :is(.banner__before-after,input[type=range]){z-index:initial!important}}@media (hover: none) and (pointer: coarse){.banner-wrapper--before-after-horizontal :is(.banner__before-after,input[type=range]){z-index:initial!important}}.before-after :is(.banner__before-after-picker,.banner__before-after-tap){z-index:1}.before-after .before-after__banner{pointer-events:none}.banner-wrapper--before-after-horizontal input[type=range]{top:0;left:0;width:100%;height:100%}.banner-wrapper--before-after-vertical input[type=range]{transform:rotate(-90deg);transform-origin:center;height:var(--element-width, 0rem);width:var(--element-aspect-ratio, 0%);top:calc(50% - calc(var(--element-width, 0rem) / 2));left:calc(50% - calc(var(--element-aspect-ratio, 0%) / 2))}.banner-wrapper input[type=range]:focus-visible{outline:none}.banner-wrapper input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:6rem;height:6rem;background:transparent;border-radius:50%;border:3px solid #fff;cursor:grab}.banner-wrapper input[type=range]:active::-webkit-slider-thumb{cursor:grabbing}.banner-wrapper input[type=range]::-moz-range-thumb{width:6rem;height:6rem;background:transparent;border-radius:50%;border:3px solid #fff;cursor:grab}.banner-wrapper input[type=range]:active::-moz-range-thumb{cursor:grabbing}.banner__before-after-picker{position:absolute;pointer-events:none}.banner-wrapper--before-after-horizontal .banner__before-after-picker{top:0;left:var(--before-after-value);height:100%}.banner-wrapper--before-after-vertical .banner__before-after-picker{left:0;top:calc(100% - var(--before-after-value));width:100%}.banner-wrapper input[type=range]:active+.banner__before-after-picker{--picker-background: var(--clr-theme-accent);--picker-color: var(--clr-theme-background)}.banner__before-after-picker:before,.banner__before-after-picker:after{content:"";display:block;position:absolute;background-color:rgb(var(--clr-theme-background));transition:background-color var(--picker-animation-duration)}.banner-wrapper--before-after-horizontal .banner__before-after-picker:before,.banner-wrapper--before-after-horizontal .banner__before-after-picker:after{width:.2rem;height:calc((100% - var(--thumb-size)) / 2);left:-.1rem}.banner-wrapper--before-after-horizontal .banner__before-after-picker:before{top:0}.banner-wrapper--before-after-horizontal .banner__before-after-picker:after{bottom:0}.banner-wrapper--before-after-vertical .banner__before-after-picker:before,.banner-wrapper--before-after-vertical .banner__before-after-picker:after{height:.2rem;width:calc((100% - var(--thumb-size)) / 2);top:-.1rem}.banner-wrapper--before-after-vertical .banner__before-after-picker:before{left:0}.banner-wrapper--before-after-vertical .banner__before-after-picker:after{right:0}.banner__before-after-thumb{display:flex!important;align-items:center;justify-content:center;position:absolute;width:var(--thumb-size);height:var(--thumb-size);background-color:rgba(var(--picker-background));color:rgb(var(--picker-color));border-radius:50px;transition:background-color var(--picker-animation-duration)}.banner-wrapper--before-after-horizontal .banner__before-after-thumb{top:calc(50% - var(--thumb-size) / 2);left:calc(var(--thumb-size) / 2 * -1)}.banner-wrapper--before-after-vertical .banner__before-after-thumb{top:calc(var(--thumb-size) / 2 * -1);left:calc(50% - var(--thumb-size) / 2)}.banner__before-after-thumb .icon{color:currentColor;transition:color var(--picker-animation-duration)}.banner-wrapper--before-after-horizontal .banner__before-after-thumb .icon{transform:rotate(90deg)}.before-after.banner-wrapper--before-after-horizontal .banner__box{min-width:initial;width:50%}.before-after.banner-wrapper--before-after-vertical .banner__box{min-height:initial}@media screen and (min-width: 1025px){.before-after.banner-wrapper--before-after-horizontal .banner__box{max-width:calc(var(--banner-box-width) - 4rem)}}.banner-wrapper--before-after-horizontal:not(.before-after) .banner__second-media,.banner-wrapper--before-after-horizontal.before-after .before-after__second-media{clip-path:inset(0 0 0 var(--before-after-value))}.banner-wrapper--before-after-vertical:not(.before-after) .banner__second-media,.banner-wrapper--before-after-vertical.before-after .before-after__second-media{clip-path:inset(calc(100% - var(--before-after-value)) 0 0 0)}@media (hover: none) and (pointer: coarse){.banner__before-after-tap{display:block!important;position:absolute;right:min(25%,3rem);bottom:min(25%,3rem);width:4rem;height:4rem;margin-right:-2rem;margin-bottom:-2rem;background:#fff9;border-radius:50%;transform:translate(-50%,-50%) scale(0);opacity:0;animation:pulse 1.5s infinite;pointer-events:none}}.before-after{position:relative;border-radius:var(--images-border-radius)}.before-after .before-after__second-media{position:absolute;top:0;left:0;right:0}.before-after__banner{min-height:100%;background-color:rgb(var(--color-background))}.before-after-section-wrapper>.grid-bs{row-gap:4rem}.before-after-section-wrapper .section-buttons{margin-top:-1rem}@keyframes pulse{0%{transform:translate(-50%,-50%) scale(0);opacity:1}50%{transform:translate(-50%,-50%) scale(1.5);opacity:0}to{transform:translate(-50%,-50%) scale(0);opacity:0}}
/*# sourceMappingURL=/cdn/shop/t/33/assets/banner-before-after.css.map */