/* stylelint-disable no-duplicate-selectors */
/* stylelint-disable */
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
:host {
  --divider-width: 2px;
  --handle-size: 2.5rem;
  display: inline-block;
  position: relative;
}
.s-image-comparer {
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
}
.s-image-comparer-before,
.s-image-comparer-after {
  display: block;
  pointer-events: none;
}
.s-image-comparer-after {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.s-image-comparer-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  width: var(--divider-width);
  height: 100%;
  background-color: var(--s-color-neutral-0);
  translate: calc(var(--divider-width) / -2);
  cursor: ew-resize;
}
.s-image-comparer-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: calc(50% - (var(--handle-size) / 2));
  width: var(--handle-size);
  height: var(--handle-size);
  background-color: var(--s-color-neutral-0);
  border-radius: var(--s-border-radius-circle);
  font-size: calc(var(--handle-size) * 0.5);
  color: var(--s-color-neutral-700);
  cursor: inherit;
  z-index: 10;
}
.s-image-comparer-handle:focus-visible {
  outline: var(--s-focus-ring);
  outline-offset: var(--s-focus-ring-offset);
}