badge

each primary in ['primary', 'success', 'danger', 'warning']
    span.na-badge(data-primary=primary)= primary

## data-processing

span.na-badge(data-processing style="font-size: 16px") processing

## custom style

• 全局变量 --color-badge 可以自定义圆点和波纹颜色RGB值
• 全局变量 --badge-processing-weight 调整 波浪大小
• 全局变量 --indent-badge 调整文字左内边距，原本是用 text-indent 属性实现，但是在Safari中使用 ::before 的元素不支持 text-indent。如果使用 text-indent 效果见下：

span.na-badge(data-processing data-primary="danger" style={
    "--indent-badge": "0",
    "text-indent": "1.2em",
    "font-size": "20px",
    "--badge-processing-weight": "2px",
    "--color-badge": "var(--primary-7)"
})
    span.na-code.na-font-mono debug

上述示例代码依然使用 text-indent，在Safari中可以观察到波纹是椭圆形，且圆心也偏移了。

• 全局变量 --margin-badge 圆点的边距，可以用来反向调整圆点大小

span.na-tag(data-primary="danger" style={
    "--indent-badge": "30px",
    "--margin-badge": "6px",
    "border-style": "dashed"
})
    span.na-badge(data-processing)
        svg(
            role="img"
            aria-label="bug"
            width=30
            height=30
            style="vertical-align: middle"
        )