.image-compare {
    position: relative;
    margin: 0;

    &.full {
      overflow: hidden;
      height: 100%;
      width: 100%;
      flex: 1;

      img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
    }

    img {
      max-width: none;
      display: block;
    }
  }

  .image-compare-wrapper,
  .image-compare-handle {
    bottom: 0;
    position: absolute;
    top: 0;
  }

  .image-compare-wrapper {
    left: 0;
    overflow: hidden;
    width: 100%;
    z-index: 0;
    transform: translateZ(0);
    will-change: width;
  }

  .image-compare-handle {
    color: #fff;
    background-color: currentColor;
    cursor: ew-resize;
    transform: translateX(-50%) translateZ(0);
    width: 2px;
    z-index: 0;
    will-change: left;
  }

  .image-compare-handle-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 2rem;
    color: currentColor;
    line-height: normal;

    &.left {
      padding-right: 10px;
      transform: translate(-100%, -50%);
    }

    &.right {
      padding-left: 10px;
      transform: translate(0, -50%);
    }
  }