img-comparison-slider {
  visibility: hidden;
  --divider-width: 4px;
}

img-comparison-slider:focus-visible {
  outline: none;
}

img-comparison-slider [slot='second'] {
  display: none;
}

img-comparison-slider.rendered {
  visibility: inherit;
}

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

img-comparison-slider .left,
img-comparison-slider .right {
  margin: 0;
}

img-comparison-slider .left figcaption,
img-comparison-slider .right figcaption {
  display: inline-block;
  position: absolute;
  top: 10%;
  transform: translateY(-50%);
  background: #ffffff;
  color: #111111;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  line-height: 100%;
  font-family: "Bowlby One SC", Arial, Roboto, Helvetica, sans-serif;
  font-size: 1rem;
  box-shadow: 3px 3px 1px rgba(10, 10, 10, 0.25);
}

img-comparison-slider .left figcaption {
  left: 12px;
}

img-comparison-slider .right figcaption {
  right: 12px;
}

img-comparison-slider .custom-slider-handle {
  width: 55px;
  height: 82.5px;
  position: relative;
}

img-comparison-slider .custom-slider-handle img {
  position: absolute;
}

/* Default state - hide hover and pressed handles */
img-comparison-slider .custom-slider-handle .custom-slider-handle--hover,
img-comparison-slider .custom-slider-handle .custom-slider-handle--pressed {
  opacity: 0;
}

/* Hover state */
img-comparison-slider:hover .custom-slider-handle .custom-slider-handle--hover {
  opacity: 1;
}

img-comparison-slider:hover .custom-slider-handle .custom-slider-handle--default,
img-comparison-slider:hover .custom-slider-handle .custom-slider-handle--pressed {
  opacity: 0;
}

/* Pressed state */
img-comparison-slider.pressed .custom-slider-handle .custom-slider-handle--pressed {
  opacity: 1;
}

img-comparison-slider.pressed .custom-slider-handle .custom-slider-handle--default,
img-comparison-slider.pressed .custom-slider-handle .custom-slider-handle--hover {
  opacity: 0;
}

#tinymce img-comparison-slider {
  display: flex;
  flex-direction: row;
  visibility: visible;
}

#tinymce img-comparison-slider figure {
  display: flex;
  width: 50%;
}

#tinymce img-comparison-slider .left figcaption,
#tinymce img-comparison-slider .right figcaption {
  top: unset;
  margin-top: 20px;
  font-size: 8px;
  border-radius: 8px;
  padding: 6px;
}

#tinymce img-comparison-slider .custom-slider-handle {
  display: none;
}