.mashup-ba {
  position: relative;
  width: 100%;
}

.mashup-ba .mashup-ba-badge{
  position:absolute;
  z-index:10;
  left:12px; top:12px;
  font-size:12px; font-weight:600;
  padding:6px 10px;
  border-radius:9999px;
  background:rgba(0,0,0,.7);
  color:#fff;
  pointer-events:none;
}

.mashup-ba .mashup-ba-stage{
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
  touch-action: none;
}

.mashup-ba img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.mashup-ba .mashup-ba-before{
  position:absolute;
  inset:0;
}

.mashup-ba .mashup-ba-after-wrap{
  position:absolute;
  inset:0;
  overflow:hidden;
}

.mashup-ba .mashup-ba-tag{
  position:absolute;
  bottom:12px;
  font-size:11px; line-height:1;
  padding:6px 8px;
  border-radius:6px;
  color:#fff;
  opacity:1;
  transition: opacity .2s ease;
}

.mashup-ba .mashup-ba-tag-before{
  left:12px; background:rgba(17,17,17,.95);
}

.mashup-ba .mashup-ba-tag-after{
  right:12px; background:#059669; 
}

.mashup-ba .mashup-ba-handle{
  position:absolute;
  top:0; bottom:0;
  width:0;  
  pointer-events:none;
  transform:translateX(-1px);
}

.mashup-ba .mashup-ba-divider{
  position:absolute;
  left:-1px; top:0; bottom:0;
  width:2px;
  background:rgba(255,255,255,.85);
  box-shadow: 0 0 0 1px rgba(0,0,0,.05);
}

.mashup-ba .mashup-ba-knob{
  position:absolute;
  left:-10px; bottom:10px;
  width:20px; height:20px;
  border-radius:9999px;
  background:#fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}

.mashup-ba .mashup-ba-range{
  position:absolute;
  left:0; right:0; bottom:0;
  height:40px;
  -webkit-appearance:none; appearance:none;
  background: linear-gradient(90deg, rgba(24,24,27,.6), rgba(255,255,255,.2), rgba(5,150,105,.6));
  opacity:.0; transition: opacity .2s ease;
  z-index: 5;
  touch-action: none;
}

.mashup-ba:hover .mashup-ba-range{ opacity:1; }

.mashup-ba .mashup-ba-range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:1px; height:40px; background:transparent;
}

.mashup-ba .mashup-ba-range::-moz-range-thumb{
  width:1px; height:40px; background:transparent; border:none;
}

.mashup-ba.is-before-hidden .mashup-ba-tag-before{
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
}

.mashup-ba.is-after-hidden .mashup-ba-tag-after{
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
}

.mashup-ba .mashup-ba-before{ z-index:0; }
.mashup-ba .mashup-ba-after-wrap{ z-index:1; }   
.mashup-ba .mashup-ba-tag{ z-index:3; }          
.mashup-ba .mashup-ba-handle{ z-index:4; }
.mashup-ba .mashup-ba-range{ z-index:1; }