.c-before-after{--c-before-after-pos: 50%;--c-before-after-ratio: 3 / 2;--c-before-after-handle-size: 2.75rem;--c-before-after-arrows: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 6 3 12l6 6M15 6l6 6-6 6'/></svg>");position:relative;overflow:hidden;aspect-ratio:var(--c-before-after-ratio);border-radius:var(--c-before-after-radius, var(--lg-border-radius));background-color:var(--color-image-placeholder);-webkit-user-select:none;user-select:none}.c-before-after .c-before-after__image{position:absolute;inset-block:0;inset-inline-start:0;inline-size:100%;block-size:100%;object-fit:cover}.c-before-after .c-before-after__image[data-layer=before]{clip-path:inset(0 calc(100% - var(--c-before-after-pos)) 0 0);z-index:1}.c-before-after .c-before-after__divider{position:absolute;inset-block:0;inset-inline-start:var(--c-before-after-pos);inline-size:var(--c-before-after-divider-width, .25rem);translate:-50% 0;background-color:var(--c-before-after-divider, var(--color-white));pointer-events:none;z-index:3}.c-before-after .c-before-after__divider:after{content:"";position:absolute;inset-block-start:50%;inset-inline-start:50%;translate:-50% -50%;inline-size:var(--c-before-after-handle-size);block-size:var(--c-before-after-handle-size);border-radius:var(--pill-border-radius);background-color:var(--c-before-after-handle-bg, var(--color-white));box-shadow:0 .125rem .5rem var(--color-shadow);z-index:0}.c-before-after .c-before-after__divider:before{content:"";position:absolute;inset-block-start:50%;inset-inline-start:50%;translate:-50% -50%;inline-size:1.25rem;block-size:1.25rem;background-color:var(--c-before-after-handle-icon, var(--color-primary));-webkit-mask-image:var(--c-before-after-arrows);mask-image:var(--c-before-after-arrows);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;z-index:1}.c-before-after .c-before-after__control{position:absolute;inset-block:0;inset-inline-start:calc(var(--c-before-after-handle-size) / -2);inline-size:calc(100% + var(--c-before-after-handle-size));margin:0;-webkit-appearance:none;appearance:none;background-color:transparent;cursor:col-resize;touch-action:pan-y;z-index:4}.c-before-after .c-before-after__control::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;inline-size:var(--c-before-after-handle-size);block-size:var(--c-before-after-handle-size);border-radius:var(--pill-border-radius);background-color:transparent;cursor:col-resize}.c-before-after .c-before-after__control::-moz-range-thumb{inline-size:var(--c-before-after-handle-size);block-size:var(--c-before-after-handle-size);border:0;border-radius:var(--pill-border-radius);background-color:transparent;cursor:col-resize}.c-before-after .c-before-after__control:focus-visible{outline:none}.c-before-after[data-label-before]:before,.c-before-after[data-label-after]:after{position:absolute;inset-block-start:var(--md-spacing);padding-block:var(--xsm-spacing);padding-inline:var(--sm-spacing);border-radius:var(--c-before-after-label-radius, 1rem);background-color:var(--c-before-after-label-bg, var(--color-primary));color:var(--c-before-after-label-fg, var(--color-white));font-family:var(--font-body);font-weight:var(--semibold-font-weight);font-size:var(--xsm-font-size);line-height:1.4;letter-spacing:var(--letter-spacing-uppercase);text-transform:uppercase;pointer-events:none;z-index:2}.c-before-after[data-label-before]:before{content:attr(data-label-before);inset-inline-start:var(--md-spacing)}.c-before-after[data-label-after]:after{content:attr(data-label-after);inset-inline-end:var(--md-spacing)}.c-before-after:has(.c-before-after__control:focus-visible) .c-before-after__divider:after{outline:.1875rem solid var(--color-accent);outline-offset:.1875rem}@media(min-width:768px){.c-before-after{--c-before-after-handle-size: 3.25rem}}
/*# sourceMappingURL=/cdn/shop/t/20/assets/component-common-before-after.css.map */