/*! Copyright 2026 Fonticons, Inc. - https://webawesome.com/license */
import {
  i
} from "./chunk.7OBLIRXR.js";

// src/components/comparison/comparison.styles.ts
var comparison_styles_default = i`:host {
  --divider-width: 0.125rem;
  --handle-size: 2.5rem;
  display: block;
  position: relative;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
}
.before,
.after {
  display: block;
}
:is(.before, .after)::slotted(img),
:is(.before, .after)::slotted(svg) {
  display: block;
  max-width: 100% !important;
  height: auto;
}
:is(.before, .after)::slotted(:not(img, svg)) {
  isolation: isolate;
}
.after {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
:host(:state(dragging)) .before,
:host(:state(dragging)) .after {
  pointer-events: none;
}
.divider {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  width: var(--divider-width);
  height: 100%;
  background-color: var(--wa-color-surface-default);
  translate: calc(var(--divider-width) / -2);
  cursor: ew-resize;
}
.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(--wa-color-surface-default);
  border-radius: var(--wa-border-radius-circle);
  font-size: calc(var(--handle-size) * 0.4);
  color: var(--wa-color-neutral-on-quiet);
  cursor: inherit;
  z-index: 10;
}
.handle:focus-visible {
  outline: var(--wa-focus-ring);
  outline-offset: var(--wa-focus-ring-offset);
}
`;

export {
  comparison_styles_default
};
