@layer components.imageCompare{:host{--image-compare-ratio:.5;--image-compare-divider-width:var(--ec-image-compare-divider-width,2px);--image-compare-divider-color:var(--ec-image-compare-divider-color,var(--color-background));--image-compare-handle-size:var(--ec-image-compare-handle-size,2.75rem);--image-compare-handle-background:var(--ec-image-compare-handle-background,var(--color-background));--image-compare-handle-color:var(--ec-image-compare-handle-color,var(--color-text));--image-compare-focus-color:var(--ec-image-compare-focus-color,var(--color-primary));--image-compare-position:calc(var(--image-compare-ratio) * 100%);display:block;position:relative}[data-role=frame]{-webkit-user-select:none;user-select:none;position:relative}[data-role=before]{position:relative;overflow:hidden}[data-role=after]{clip-path:inset(0 0 0 var(--image-compare-position));position:absolute;inset:0;overflow:hidden}::slotted(*){width:100%;height:100%;display:block}input[type=range]{appearance:none;z-index:2;opacity:0;cursor:ew-resize;touch-action:pan-y;background:0 0;width:100%;height:100%;margin:0;position:absolute;inset:0}input[type=range]::-webkit-slider-thumb{appearance:none;width:1px;height:100%}input[type=range]::-moz-range-thumb{border:0;width:1px;height:100%}[data-role=divider]{top:0;bottom:0;left:var(--image-compare-position);z-index:1;width:var(--image-compare-divider-width);background:var(--image-compare-divider-color);pointer-events:none;position:absolute;transform:translate(-50%)}[data-role=handle]{box-sizing:border-box;width:var(--image-compare-handle-size);height:var(--image-compare-handle-size);background:var(--image-compare-handle-background);border-radius:50%;justify-content:space-between;align-items:center;padding-inline:.55rem;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 2px 8px rgba(0,0,0,.35)}[data-role=handle]:before,[data-role=handle]:after{content:"";border-block:.4rem solid transparent;width:0;height:0}[data-role=handle]:before{border-inline-end:.5rem solid var(--image-compare-handle-color)}[data-role=handle]:after{border-inline-start:.5rem solid var(--image-compare-handle-color)}input[type=range]:focus-visible+[data-role=divider] [data-role=handle]{outline:3px solid var(--image-compare-focus-color);outline-offset:3px}@media (forced-colors:active){[data-role=divider]{background:canvastext}[data-role=handle]{background:canvas;border:2px solid canvastext}[data-role=handle]:before{border-inline-end-color:canvastext}[data-role=handle]:after{border-inline-start-color:canvastext}input[type=range]:focus-visible+[data-role=divider] [data-role=handle]{outline-color:highlight}}}