.before-after__cursor {
  background: none;
  border: none;
  padding: 0;
  width: max-content;
  touch-action: none;
  cursor: col-resize;
  transform: translate(calc(calc(-50% * var(--transform-logical)) + var(--clip-path-offset, 0px)), 0);
  will-change: transform;
}

.before-after__cursor::before {
  content: '';
  z-index: -1;
  position: absolute;
  width: 4px;
  height: 100%;
  background-color: rgb(var(--color-background));
}

.before-after__cursor-dots {
  width: 44px;
  height: 44px;
  border-radius: 50px;
  background-color: rgb(var(--color-background));
  box-shadow: 0px 0px 40px 0px rgb(var(--color-text)/ 0.5);
}

.before-after__cursor-dot {
  width: 1.5px;
  height: 16px;
  background-color: rgb(var(--color-text));
}

@media (min-width: 960px) {
  .before-after__cursor-dots {
    width: 55px;
    height: 55px;
  }

  .before-after__cursor-dot {
    height: 20px;
  }
}

.before-after__comparison-image {
  clip-path: inset(0 calc(calc(50% * var(--transform-logical)) - var(--clip-path-offset, 0px)) 0 0);
}

.before-after__comparison-image:nth-of-type(1) .before-after__group {
  left: 16px;
}

.before-after__comparison-image:nth-of-type(2) {
  position: absolute;
  inset: 0;
  clip-path: inset(0 0 0 calc(50% + var(--clip-path-offset, 0px)));
}

.before-after__comparison-image:nth-of-type(2) .before-after__group {
  right: 16px;
}

.before-after__comparison-image:nth-of-type(2) .placeholder {
  background-color: rgb(var(--color-text)/ 0.4);
}

.before-after__group {
  position: absolute;
  inset-block-end: 16px;
  color: rgb(var(--color-text));
  background-color: rgb(var(--color-background));
  box-shadow: 0px 0px 40px 0px rgb(var(--color-text)/ 0.08);
}