.basl-wrap{
  --pos:50%; --basl-line:3px;
  position:relative; overflow:hidden; line-height:0;
  border-radius:16px; width:100%;
  user-select:none; -webkit-user-select:none;
  touch-action:pan-y; cursor:ew-resize;
}
.basl-wrap.basl-vertical{ touch-action:pan-x; cursor:ns-resize; }
.basl-wrap img{ display:block; width:100%; max-width:100%; height:auto; pointer-events:none; -webkit-user-drag:none; }
.basl-wrap img.basl-before{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  clip-path:inset(0 calc(100% - var(--pos)) 0 0);
}
.basl-vertical img.basl-before{ clip-path:inset(0 0 calc(100% - var(--pos)) 0); }

.basl-line{
  position:absolute; top:0; bottom:0; left:var(--pos);
  width:var(--basl-line); transform:translateX(-50%);
  background:#fff; pointer-events:none;
}
.basl-vertical .basl-line{
  top:var(--pos); bottom:auto; left:0; right:0;
  width:auto; height:var(--basl-line); transform:translateY(-50%);
}
.basl-handle{
  position:absolute; top:50%; left:var(--pos);
  width:44px; height:44px; box-sizing:border-box;
  transform:translate(-50%,-50%);
  border:3px solid #fff; border-radius:50%;
  background:rgba(0,0,0,.25); color:#fff;
  display:flex; align-items:center; justify-content:center;
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  cursor:inherit; outline:none; transition:box-shadow .2s;
}
.basl-handle:focus-visible{ box-shadow:0 0 0 3px rgba(255,255,255,.6); }
.basl-handle svg{ display:block; }
.basl-vertical .basl-handle{ top:var(--pos); left:50%; }
.basl-vertical .basl-handle svg{ transform:rotate(90deg); }

.basl-label{
  position:absolute; bottom:18px; padding:8px 16px; font-size:14px; font-weight:600; line-height:1.2;
  color:#fff; background:rgba(0,0,0,.5); pointer-events:none; z-index:2;
}
.basl-label-before{ left:18px; }
.basl-label-after{ right:18px; }
.basl-vertical .basl-label-before{ top:18px; bottom:auto; left:18px; right:auto; }
.basl-vertical .basl-label-after{ bottom:18px; left:18px; right:auto; }