/* Base styles for img-comparison-slider, with a graceful fallback.
 *
 * The upstream stylesheet hides the element outright until the script adds
 * `.rendered`, which leaves an empty box if the script fails or is slow. Here
 * the "after" image is shown on its own until the component upgrades, so the
 * worst case is a static photo rather than a hole in the page. */

img-comparison-slider {
  display: block;
  position: relative;
  overflow: hidden;
}

/* Before the custom element is defined: show the second (after) image only. */
img-comparison-slider:not(.rendered) [slot="first"],
img-comparison-slider:not(.rendered) figcaption {
  display: none;
}

img-comparison-slider.rendered [slot="first"] {
  display: unset;
}

img-comparison-slider.rendered [slot="second"] {
  display: unset;
}

img-comparison-slider.rendered figcaption {
  display: block;
}