| .dw-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: var(--space-2); | |
| height: 22px; | |
| padding: 0 var(--space-2); | |
| border-radius: var(--radius-sm); | |
| font-size: var(--text-xs); | |
| font-weight: 500; | |
| line-height: 1; | |
| white-space: nowrap; | |
| } | |
| .dw-badge__dot { | |
| width: 6px; | |
| height: 6px; | |
| border-radius: var(--radius-full); | |
| background: currentColor; | |
| } | |
| .dw-badge--default { | |
| background: var(--color-surface-hover); | |
| color: var(--color-text-secondary); | |
| } | |
| .dw-badge--accent { | |
| background: var(--color-accent-soft); | |
| color: var(--color-accent-text); | |
| } | |
| .dw-badge--success { | |
| background: var(--color-success-soft); | |
| color: var(--color-success); | |
| } | |
| .dw-badge--warning { | |
| background: var(--color-warning-soft); | |
| color: var(--color-warning); | |
| } | |
| .dw-badge--danger { | |
| background: var(--color-danger-soft); | |
| color: var(--color-danger); | |
| } | |
| .dw-badge--info { | |
| background: var(--color-info-soft); | |
| color: var(--color-text-secondary); | |
| } | |