/* Container */
.ba {
  --ba-line-w: 2px;            /* tweak line thickness */
  border-radius: 15px;
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  user-select: none;
  height: 300px;
}

/* Images */
.ba-img { display: block; width: 100%; height: auto; pointer-events: none; }
.ba-layer { position: absolute; inset: 0; }
.ba-layer--after img,
.ba-layer--before img { width: 100%; height: 100%; object-fit: cover; }

/* Handle */
.ba-handle {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* Handle line (centered on the split) */
.ba-handle-line {
  position: absolute;
  background: rgba(255,255,255,.9);
  pointer-events: none;
}
.ba[data-orientation="horizontal"] .ba-handle-line {
  top: 0;
  height: 100%;
  width: var(--ba-line-w);
  left: var(--ba-x, 50%);
  transform: translateX(-50%);
}
.ba[data-orientation="vertical"] .ba-handle-line {
  left: 0;
  width: 100%;
  height: var(--ba-line-w);
  top: var(--ba-y, 50%);
  transform: translateY(-50%);
}

/* Knob (perfect circle, centered) */
/* Knob (use the same coordinate vars as the line) */
.ba-handle-knob {
  position: absolute;
  width: 40px;
  height: 40px;
  aspect-ratio: 1 / 1;
  padding: 0;
  box-sizing: border-box;
  border: 0;                 /* reset UA button styles */
  appearance: none;
  border-radius: 9999px;
  background: rgba(0,0,0,.75);
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
  display: grid;
  place-items: center;
  line-height: 1;
  font-size: 22px;
  color: #fff;
  transform: translate(-50%, -50%);   /* center by own middle */
  transform-origin: center;
  user-select: none;
  pointer-events: auto;
}

/* Position knob from the same vars as the line */
.ba[data-orientation="horizontal"] .ba-handle-knob { 
  left: var(--ba-x, 50%); 
  top: 50%; 
  cursor: ew-resize; 
}
.ba[data-orientation="vertical"] .ba-handle-knob { 
  top: var(--ba-y, 50%); 
  left: 50%; 
  cursor: ns-resize; 
}

/* (optional) icon inside knob */
.ba-handle-knob i { display: block; line-height: 1; pointer-events: none; }

/* Labels */
.ba-label {
  position: absolute;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: 12px;
  line-height: 1;
  letter-spacing: .2px;
  backdrop-filter: blur(2px);
}
.ba-label--before { top: 10px; left: 10px; }
.ba-label--after  { bottom: 10px; right: 10px; }

/* Focus ring for keyboard users */
.ba-knob-button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* Optional fixed aspect ratio
.ba { aspect-ratio: 16/9; }
*/

.ba-layer { position: absolute; inset: 0; }
.ba-layer--after { z-index: 1; }   /* bottom */
.ba-layer--before { z-index: 2; }  /* on top, gets clipped */
.ba-handle { z-index: 3; }         /* above layers */
.ba-label { z-index: 4; }          /* optional, above handle */