"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Kbd = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const nano_theme_1 = require("nano-theme");
const blockClass = (0, nano_theme_1.rule)({
    ...nano_theme_1.theme.font.mono.mid,
    mrt: '-.3em',
    pdt: '.3em',
    pdb: '.3em',
    bg: nano_theme_1.theme.g(0.2),
    bdt: `1px solid ${nano_theme_1.theme.g(0.3)}`,
    bdb: `2px solid ${nano_theme_1.theme.g(0)}`,
    lh: '1em',
    fz: '.7em',
    ws: 'nowrap',
    bxsh: '0 0 .125em rgba(0,0,0,.5),0 .065em .19em rgba(0,0,0,.5),.065em 0 .125em rgba(0,0,0,.2)',
    col: '#fff',
});
const startClass = (0, nano_theme_1.rule)({
    pdl: '.7em',
    borderTopLeftRadius: '.3em',
    borderBottomLeftRadius: '.3em',
});
const endClass = (0, nano_theme_1.rule)({
    pdr: 'calc(.7em - 2px)',
    borderTopRightRadius: '.3em',
    borderBottomRightRadius: '.3em',
    bdr: `2px solid ${nano_theme_1.theme.g(0.1)}`,
});
const Kbd = (props) => {
    const { attr, children } = props;
    const className = blockClass + (attr.isStart() ? startClass : '') + (attr.isEnd() ? endClass : '');
    return React.createElement("kbd", { className: className }, children);
};
exports.Kbd = Kbd;
//# sourceMappingURL=Kbd.js.map