/* ------------------------------------------------------------------
   Before / after comparison slider
   Bright Website Design
   Loaded only on singular content containing .bwd-compare
   See functions.php > bwd_compare_assets()
------------------------------------------------------------------ */

.bwd-compare{
  --bwd-compare-accent:#46B89B;
  position:relative;
  display:block;
  width:100%;
  max-width:520px;
  margin:0 auto;
  overflow:hidden;
  line-height:0;
  border-radius:4px;
  touch-action:pan-y;
}

.bwd-compare img{
  display:block;
  width:100%;
  height:auto;
  margin:0;
  user-select:none;
  -webkit-user-drag:none;
}

.bwd-compare__overlay{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  object-fit:cover;
  clip-path:inset(0 calc(100% - var(--bwd-compare-pos,50%)) 0 0);
}

/* Labels */
.bwd-compare__tag{
  position:absolute;
  bottom:14px;
  z-index:2;
  padding:5px 10px;
  font-size:13px;
  line-height:1.35;
  color:#fff;
  background:rgba(0,0,0,.6);
  border-radius:3px;
  pointer-events:none;
}
.bwd-compare__tag--left{left:12px;}
.bwd-compare__tag--right{right:12px;}

/* Divider line and handle */
.bwd-compare__line{
  position:absolute;
  top:0;
  bottom:0;
  left:var(--bwd-compare-pos,50%);
  width:2px;
  margin-left:-1px;
  background:#fff;
  z-index:3;
  pointer-events:none;
}
.bwd-compare__grip{
  position:absolute;
  top:50%;
  left:50%;
  width:44px;
  height:44px;
  margin:-22px 0 0 -22px;
  background:#fff;
  border:2px solid var(--bwd-compare-accent);
  border-radius:50%;
}
.bwd-compare__grip::before,
.bwd-compare__grip::after{
  content:"";
  position:absolute;
  top:50%;
  width:0;
  height:0;
  margin-top:-5px;
  border-top:5px solid transparent;
  border-bottom:5px solid transparent;
}
.bwd-compare__grip::before{
  left:9px;
  border-right:7px solid var(--bwd-compare-accent);
}
.bwd-compare__grip::after{
  right:9px;
  border-left:7px solid var(--bwd-compare-accent);
}

/* The real control: a native range input stretched over the image.
   Invisible, but gives drag, tap, touch and arrow keys for free. */
.bwd-compare__control{
  position:absolute;
  top:0;
  left:0;
  z-index:4;
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  background:transparent;
  border:0;
  appearance:none;
  -webkit-appearance:none;
  cursor:ew-resize;
}
.bwd-compare__control:focus{outline:none;}
.bwd-compare__control:focus-visible{
  outline:3px solid var(--bwd-compare-accent);
  outline-offset:-3px;
}
.bwd-compare__control::-webkit-slider-runnable-track{
  height:100%;
  background:transparent;
}
.bwd-compare__control::-moz-range-track{
  height:100%;
  background:transparent;
}
.bwd-compare__control::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:44px;
  height:44px;
  background:transparent;
  border:0;
  cursor:ew-resize;
}
.bwd-compare__control::-moz-range-thumb{
  width:44px;
  height:44px;
  background:transparent;
  border:0;
  cursor:ew-resize;
}

.bwd-compare input[type="range"].bwd-compare__control {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
}