.image-diff {
    display: inline-block;
}

.image-diff__inner {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUAQMAAAC3R49OAAAABlBMVEX5+fn///8pDrwNAAAAFElEQVQI12NgsP/AQAz+f4CBGAwAJIIdTTn0+w0AAAAASUVORK5CYII=);

    margin: 0;
    position: absolute;
}

.image-diff__before {
    box-shadow: 0 0 0 1px #f77;
    
    right: 0px;
    margin: 0;
    position: absolute;
}

.image-diff__after {
    right: 0;
    margin: 0;
    position: absolute;
}

/* fix border color in left fade pos */
.image-diff__inner--fade .image-diff__wrapper {
    z-index: 1;
    position: absolute;
}

.image-diff__wrapper {
    box-shadow: 0 0 0 1px #63c363;
}

/*
 * difference mode
 */

.image-diff__inner--difference .image-diff__after img {
    mix-blend-mode: difference;
}

.image-diff__inner--difference .image-diff__before,
.image-diff__inner--difference .image-diff__after {
      position: absolute;
      top: 0;
      left: 0;
      border: none;
}

.image-diff__inner--difference {
    position: relative;
    -webkit-filter: invert(1); /* white base color instead of black */
}

/*
 * swipe mode
 */

.image-diff__inner--swipe .image-diff__wrapper {
    box-shadow: -7px 0 10px -5px rgba(0,0,0,.5), 0 0 0 1px #63c363;
    margin: 0;
    overflow: hidden;
    position: absolute;
    right: 0;
}