/**
 * Before / After Slider component.
 *
 * Layout follows img-comparison-slider's native sizing model: the slotted
 * <img> elements drive the slider's intrinsic size. For best results, the
 * "before" and "after" images should be the same dimensions.
 */

.before-after-slider {
  container-type: inline-size;
  margin: 0;
  background: transparent;

  .handle-container {
    cursor: col-resize;
    width: 50px;
  }

  img-comparison-slider {
    overflow: clip;

    --divider-width: 100px;
    --divider-color: transparent;
  }

  figcaption {
    margin: 0;
    padding: 0 10px 10px;
    background: transparent;
  }
}


img-comparison-slider.rendered .before-after-slider__handle {
  --handle-width: 50px;

  position: relative;
  width: var(--handle-width);
  height: var(--handle-width);
  border: solid 1px transparent;
  border-radius: 50%;
  pointer-events: auto;
  cursor: col-resize;
  background: var(--color--orange-dark);
  color: white;

  @container (width > 600px) {
    --handle-width: 100px;
  }

  &::before {
    content: "";
    position: absolute;
    left: 50%;
    translate: -50% 0;
    top: -10000px;
    bottom: -10000px;
    /* extends well beyond slider, overflow:hidden clips it */
    width: 100px;
    background: transparent;
  }

  &::after {
    content: "";
    position: absolute;
    left: 50%;
    translate: -50% 0;
    top: -10000px;
    bottom: -10000px;
    /* extends well beyond slider, overflow:hidden clips it */
    width: 5px;
    background: var(--color--orange-dark);
  }

  svg {
    position: absolute;
    inset: 0;
    width: 80%;
    margin: auto;
  }
}