.p-imagecompare {
  @apply relative aspect-video w-full overflow-hidden;
}

.p-imagecompare img {
  @apply absolute h-full w-full;
}

.p-imagecompare img + img {
  @apply [clip-path:polygon(0_0,50%_0,50%_100%,0_100%)];
}

.p-imagecompare:dir(rtl) img + img {
  @apply [clip-path:polygon(50%_0,100%_0,100%_100%,50%_100%)];
}

.p-imagecompare-slider {
  @apply relative -ms-2 h-full w-[calc(100%+1rem)] appearance-none bg-transparent outline-none transition-all duration-200 hover:-ms-4 hover:w-[calc(100%+2rem)];
}

.p-imagecompare-slider::-webkit-slider-thumb {
  @apply h-4 w-4 cursor-ew-resize appearance-none rounded-full bg-white/30 bg-contain transition-all duration-200 focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary;
}

.p-imagecompare-slider::-moz-range-thumb {
  @apply h-4 w-4 cursor-ew-resize appearance-none rounded-full bg-white/30 bg-contain transition-all duration-200 focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary;
}

.p-imagecompare-slider:hover::-webkit-slider-thumb {
  @apply h-8 w-8 bg-white/40;
}

.p-imagecompare-slider:hover::-moz-range-thumb {
  @apply h-8 w-8 bg-white/40;
}
