import * as React from 'react';
import { rule } from 'nano-theme';
const height = 1.8;
const blockClass = rule({
    pos: 'relative',
    z: 100,
    w: '0px',
    h: '100%',
    va: 'bottom',
});
const overClass = rule({
    pos: 'absolute',
    z: 101,
    b: `${height}em`,
    l: 0,
    isolation: 'isolate',
    transform: 'translateX(calc(-50% + 0px))',
});
const underClass = rule({
    pos: 'absolute',
    z: 102,
    t: `${height}em`,
    l: 0,
    isolation: 'isolate',
    transform: 'translateX(calc(-50% + 0px))',
});
export const CaretFrame = ({ over, under, children }) => {
    return (React.createElement("span", { className: blockClass },
        children,
        !!over && (React.createElement("span", { className: overClass, contentEditable: false, style: { '--jsonjoy-peritext-editable': 'no' } }, over)),
        !!under && (React.createElement("span", { className: underClass, contentEditable: false, style: { '--jsonjoy-peritext-editable': 'no' } }, under))));
};
//# sourceMappingURL=CaretFrame.js.map