"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.RenderAnchor = exports.fadeInAnimation = 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("../../web/constants");
const constants_2 = require("./constants");
const react_1 = require("../../web/react");
const hooks_1 = require("../../web/react/hooks");
exports.fadeInAnimation = (0, nano_theme_1.keyframes)({
    from: {
        tr: 'scale(0)',
    },
    to: {
        tr: 'scale(1)',
    },
});
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.rule)({
    pos: 'absolute',
    l: 'calc(max(-6px,-0.2em))',
    t: '-0.05em',
    w: 'calc(min(12px,0.4em))',
    h: 'calc(min(16px,0.5em))',
    bdrad: '50%/20%',
    bg: constants_2.DefaultRendererColors.ActiveCursor,
    an: exports.fadeInAnimation + ' .25s ease-out',
    animationFillMode: 'forwards',
});
const RenderAnchor = () => {
    const { dom } = (0, react_1.usePeritext)();
    const focus = (0, hooks_1.useSyncStoreOpt)(dom?.cursor.focus) || false;
    const style = focus ? undefined : { background: constants_2.DefaultRendererColors.InactiveCursor };
    return (React.createElement("span", { className: blockClass, contentEditable: false },
        React.createElement("span", { className: innerClass, style: style }, constants_1.Char.ZeroLengthSpace)));
};
exports.RenderAnchor = RenderAnchor;
//# sourceMappingURL=RenderAnchor.js.map