.ds-image-compare{border-radius:var(--radius-lg);border:var(--border-xs) solid var(--color-bg-container-border);background-color:var(--color-bg-container-secondary);touch-action:pan-y;-webkit-user-select:none;user-select:none;cursor:col-resize;width:100%;position:relative;overflow:hidden}.ds-image-compare__after,.ds-image-compare__before{object-fit:cover;width:100%;height:100%;display:block;position:absolute;inset:0}.ds-image-compare__before-clip{clip-path:inset(0 calc(100% - var(--ds-image-compare-position,50%)) 0 0);position:absolute;inset:0}.ds-image-compare__label{top:var(--gap-md);z-index:2;padding:var(--padding-xxxs) var(--padding-sm);border-radius:var(--radius-full);background-color:var(--color-bg-container-inverse);color:var(--color-text-on-inverse);font-family:var(--font-paragraph-sm-em-family);font-size:var(--font-paragraph-sm-em-size);font-weight:var(--font-paragraph-sm-em-weight);line-height:var(--font-paragraph-sm-em-line-height);pointer-events:none;position:absolute}.ds-image-compare__label--before{left:var(--gap-md)}.ds-image-compare__label--after{right:var(--gap-md)}.ds-image-compare__divider{top:0;bottom:0;left:var(--ds-image-compare-position);width:var(--border-md);background-color:var(--color-bg-page-primary);z-index:1;pointer-events:none;position:absolute;transform:translate(-50%)}.ds-image-compare__handle{top:50%;left:var(--ds-image-compare-position);z-index:3;border-radius:var(--radius-full);background-color:var(--color-bg-page-primary);width:32px;height:32px;color:var(--color-icon-primary);border:var(--border-xs) solid var(--color-bg-container-border);box-shadow:var(--shadow-floating);cursor:col-resize;justify-content:center;align-items:center;display:flex;position:absolute;transform:translate(-50%,-50%)}.ds-image-compare__handle .material-symbols-rounded{--icon-size:var(--icon-size-sm)}.ds-image-compare__handle:focus-visible{outline:2px solid var(--color-action-primary-bg);outline-offset:2px}