import { styled } from 'styleh-components';
const MagnifierDom = styled.div.attrs({
    className: 'magnifier',
}) `
  height: ${(props) => props.height};
  width: ${(props) => props.width};
  position: relative;
  display: inline-block;
`;
const ZoomingDom = styled.div.attrs({
    className: (props) => props.className,
    style: (props) => props.style,
}) `
  position: absolute;
  top: var(--spacing-extra-small);
  z-index: 9;
  background-color: var(--color-pure-white);
  transition: opacity 0.3s;
  background-repeat: no-repeat;
  border: $border-white;
  box-shadow: $boxShadow;
  pointer-events: none;
  overflow: hidden;
`;
const ZoomImg = styled.img.attrs({
    className: 'magnifier-image',
    src: (props) => props.src,
    alt: (props) => props.alt,
    onMouseMove: (props) => props.onMouseMove,
    onBlur: (props) => props.onMouseOut,
    onMouseOut: (props) => props.onMouseOut,
    onTouchStart: (props) => props.onTouchStart,
    onTouchMove: (props) => props.onTouchMove,
    onTouchEnd: (props) => props.onTouchEnd,
    onLoad: (props) => props.onLoad,
}) `
  width: 100%;
  height: 100%;
  cursor: none;
  margin-bottom: var(--spacing-small);
`;
const MagnifyingCursorWrapper = styled.div.attrs({
    style: (props) => props.style,
}) `
  position: absolute;
  pointer-events: none;
`;
const ZoomedImage = styled.img `
  max-width: none;
  transform: ${(props) => props.transform};
`;
export { MagnifierDom, ZoomingDom, ZoomImg, MagnifyingCursorWrapper, ZoomedImage };
//# sourceMappingURL=styled.js.map