/**
 * Badge Component - CSS
 * Source: src/components/Atoms/Badge/Badge.tsx
 * Last synced: 2026-04 (ui-core v2.0.76)
 *
 * React root padding (devtools on Tag div): py-cs4 px-cs8 → 4px 8px. Inner <span py-cs2>
 * adds 2px y on the child only — not part of the root’s computed padding.
 * Line height: npm Storybook computes 16px on the label (text-xs + cascade), not 12px (leading-3).
 */

@import '../tokens.css';

.ui-badge {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-spline, "Spline Sans", sans-serif);
    font-weight: 600;
    white-space: nowrap;
    border-radius: 9999px;
    border: 1px solid transparent;
    /* No .ui-badge-inner: one box, same total insets as outer+inner */
    padding: calc(var(--cs4, 4px) + var(--cs2, 2px)) var(--cs8, 8px);
    font-size: 12px;
    line-height: 1rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.ui-badge:has(.ui-badge-inner) {
    padding: var(--cs4, 4px) var(--cs8, 8px);
}

/* Mirrors Tag inner py-cs2 */
.ui-badge-inner {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    padding: var(--cs2, 2px) 0;
    line-height: 1rem;
}

/* === Theme variants (match React Badge) === */
.ui-badge.default     { background-color: var(--uicore-primary); color: var(--uicore-primary-foreground); }
.ui-badge.secondary   { background-color: var(--uicore-secondary); color: var(--uicore-secondary-foreground); }
.ui-badge.destructive { background-color: var(--uicore-destructive); color: var(--uicore-destructive-foreground); }
.ui-badge.outline     { background-color: var(--uicore-background); border-color: var(--uicore-input); color: var(--uicore-foreground); }

/* Leading icon spacing (Badge.stories.tsx: mr-1 on emoji wrapper) */
.ui-badge-icon { margin-right: 4px; }

/* === Legacy color variants (kept for backward compatibility) === */

/* Legacy sizes (data tables — not part of React Badge) */
.ui-badge.sm {
    padding: var(--cs2, 2px) var(--cs6, 6px);
    font-size: 11px;
}
.ui-badge.sm .ui-badge-inner {
    padding: 1px 0;
    line-height: 1.15;
}
.ui-badge.md { padding: 3px var(--cs10, 10px); font-size: 12px; }
.ui-badge.lg { padding: var(--cs4, 4px) var(--cs12, 12px); font-size: 13px; }

/* Filled variants */
.ui-badge.green   { background-color: var(--color-green-100, #a9f8d7); color: var(--color-green-800, #007448); }
.ui-badge.red     { background-color: var(--color-red-100, #f5b9b9); color: var(--color-red-800, #9f0000); }
.ui-badge.yellow  { background-color: var(--color-yellow-200, #ffe49e); color: var(--color-yellow-800, #c68e01); }
.ui-badge.blue    { background-color: var(--color-blue-50, #d8e0f5); color: var(--color-blue-700, #13328d); }
.ui-badge.orange  { background-color: var(--color-orange-100, #f5d4a3); color: var(--color-orange-400, #f19202); }
.ui-badge.gray    { background-color: var(--color-gray-200, #edf1f2); color: var(--color-gray-700, #3d3d3d); }
.ui-badge.purple  { background-color: #ede4f7; color: var(--color-purple-500, #581b80); }
.ui-badge.teal    { background-color: #d4f1f9; color: #0e7490; }

/* Outline variants */
.ui-badge.outline-green   { border-color: var(--color-green, #00c57b); color: var(--color-green-700, #009960); background: var(--uicore-background); }
.ui-badge.outline-red     { border-color: var(--color-red, #ff1f1f); color: var(--color-red-600, #f60000); background: var(--uicore-background); }
.ui-badge.outline-yellow  { border-color: var(--color-yellow, #ffcb45); color: var(--color-yellow-800, #c68e01); background: var(--uicore-background); }
.ui-badge.outline-blue    { border-color: var(--color-blue, #365ac7); color: var(--color-blue-600, #2344aa); background: var(--uicore-background); }
.ui-badge.outline-gray    { border-color: var(--color-gray-400, #c6cbcc); color: var(--color-gray-600, #4e4e4e); background: var(--uicore-background); }

/* Dot indicator */
.ui-badge .ui-badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: currentColor;
}