/* Module: Image comparison */
.st-image-comparison {
  --st-image-comparison-position: 50%;
  --st-image-comparison-aspect: 16 / 10;

  width: min(var(--content-max-width), calc(100% - 2 * var(--space-lg)));
  margin: var(--space-2xl) auto var(--space-2xl);
}

.st-image-comparison__viewport {
  position: relative;
  width: 100%;
  aspect-ratio: var(--st-image-comparison-aspect);
  min-height: 280px;
  max-height: 720px;
  overflow: hidden;
  background: #f5f5f2;
  isolation: isolate;
  touch-action: pan-y;
}

.st-image-comparison__image,
.st-image-comparison__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.st-image-comparison__image--before {
  z-index: 2;
  clip-path: inset(0 calc(100% - var(--st-image-comparison-position)) 0 0);
}

.st-image-comparison__img {
  display: block;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.st-image-comparison__label {
  position: absolute;
  top: var(--space-md);
  z-index: 4;
  padding: var(--space-xs) var(--space-sm);
  background: rgba(31, 23, 18, 0.78);
  color: var(--color-text-inverse);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1;
}

.st-image-comparison__label--before {
  left: var(--space-md);
}

.st-image-comparison__label--after {
  right: var(--space-md);
}

.st-image-comparison__divider {
  position: absolute;
  inset: 0 auto 0 var(--st-image-comparison-position);
  z-index: 3;
  width: 3px;
  background: var(--color-text-inverse);
  box-shadow: 0 0 0 1px rgba(31, 23, 18, 0.28);
  transform: translateX(-50%);
  pointer-events: none;
}

.st-image-comparison__divider::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 42px;
  height: 42px;
  border: 2px solid var(--color-text-inverse);
  border-radius: 999px;
  background: rgba(31, 23, 18, 0.78);
  box-shadow: 0 12px 30px rgba(31, 23, 18, 0.22);
  transform: translate(-50%, -50%);
}

.st-image-comparison__divider .fa-solid {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  color: var(--color-text-inverse);
  font-size: var(--text-icon-md);
  line-height: 1;
  transform: translate(-50%, -50%);
}

.st-image-comparison__range {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  touch-action: pan-y;
}

.st-image-comparison__range:focus-visible + * {
  outline: none;
}

.st-image-comparison__viewport:focus-within .st-image-comparison__divider::before {
  outline: 3px solid rgba(1, 111, 185, 0.88);
  outline-offset: 4px;
}

@media (max-width: 781px) {
  .st-image-comparison {
    width: calc(100% - 2 * var(--space-md));
  }

  .st-image-comparison__viewport {
    min-height: 240px;
  }

  .st-image-comparison__label {
    top: var(--space-sm);
    font-size: var(--text-xs);
  }

  .st-image-comparison__label--before {
    left: var(--space-sm);
  }

  .st-image-comparison__label--after {
    right: var(--space-sm);
  }
}

@media (prefers-reduced-motion: reduce) {
  .st-image-comparison__divider::before {
    transition: none;
  }
}