"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.RenderFocus = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const nano_theme_1 = require("nano-theme");
const constants_1 = require("./constants");
const react_1 = require("../../web/react");
const hooks_1 = require("../../web/react/hooks");
const width = 0.14;
const animationTime = '1s';
const animation = (0, nano_theme_1.keyframes)({
    'from,to': {
        bg: constants_1.DefaultRendererColors.ActiveCursor,
    },
    '50%': {
        bg: 'transparent',
    },
});
const blockClass = (0, nano_theme_1.rule)({
    pos: 'relative',
    d: 'inline-block',
    pe: 'none',
    us: 'none',
    w: '0px',
    h: '100%',
    va: 'center',
});
const innerClass = (0, nano_theme_1.drule)({
    an: `${animationTime} ${animation} step-end infinite`,
    pos: 'absolute',
    w: `calc(max(${width}em, 3px))`,
    t: '-1.1em',
    h: '1.45em',
    bg: constants_1.DefaultRendererColors.ActiveCursor,
    'mix-blend-mode': 'multiply',
});
const RenderFocus = ({ left, italic, children }) => {
    const { dom } = (0, react_1.usePeritext)();
    const focus = (0, hooks_1.useSyncStoreOpt)(dom?.cursor.focus) || false;
    const style = focus ? {} : { background: constants_1.DefaultRendererColors.InactiveCursor, animation: 'none' };
    if (italic) {
        style.rotate = '11deg';
    }
    return (React.createElement("span", { className: blockClass },
        React.createElement("span", { className: innerClass({
                bdrad: left ? `0 ${width * 0.5}em ${width * 0.5}em 0` : `${width * 0.5}em 0 0 ${width * 0.5}em`,
            }), style: style }, children)));
};
exports.RenderFocus = RenderFocus;
//# sourceMappingURL=RenderFocus.js.map