/* src/components/basic/XWUIDisplayBadge/XWUIDisplayBadge.css */
/**
 * XWUIDisplayBadge Component Styles
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Roundness: theme/roundness/badge/*.css (component-specific roundness)
 * - Typography: theme/typography/*.css
 */

.xwui-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-semibold, 600);
    border-radius: var(--radius-badge, 999px);
    white-space: nowrap;
}

/* Size variants (canonical 9-step scale) */
:is(.xwui-badge-3xs,.xwui-badge-xxxs) {
    min-width: 8px;
    height: 8px;
    padding: 0 var(--spacing-xs, 2px);
    font-size: var(--font-size-xs, 0.5rem);
}
:is(.xwui-badge-4xs,.xwui-badge-xxxxs) {
    min-width: 4px;
    height: 4px;
    padding: 0 var(--spacing-xs, 2px);
    font-size: var(--font-size-xs, 0.5rem);
}

:is(.xwui-badge-2xs,.xwui-badge-xxs) {
    min-width: 12px;
    height: 12px;
    padding: 0 var(--spacing-xs, 3px);
    font-size: var(--font-size-xs, 0.5625rem);
}

.xwui-badge-xs {
    min-width: 14px;
    height: 14px;
    padding: 0 var(--spacing-xs, 3px);
    font-size: var(--font-size-xs, 0.5625rem);
}

:is(.xwui-badge-s,.xwui-badge-sm) {
    min-width: 16px;
    height: 16px;
    padding: 0 var(--spacing-xs, 4px);
    font-size: var(--font-size-xs, 0.625rem);
}

:is(.xwui-badge-m,.xwui-badge-md) {
    min-width: 20px;
    height: 20px;
    padding: 0 var(--spacing-xs, 6px);
    font-size: var(--font-size-xs, 0.75rem);
}

:is(.xwui-badge-l,.xwui-badge-lg) {
    min-width: 24px;
    height: 24px;
    padding: 0 var(--spacing-sm, 8px);
    font-size: var(--font-size-sm, 0.8125rem);
}

.xwui-badge-xl {
    min-width: 28px;
    height: 28px;
    padding: 0 var(--spacing-sm, 10px);
    font-size: var(--font-size-sm, 0.875rem);
}

:is(.xwui-badge-2xl,.xwui-badge-xxl) {
    min-width: 36px;
    height: 36px;
    padding: 0 var(--spacing-md, 13px);
    font-size: var(--font-size-md, 1.125rem);
}

:is(.xwui-badge-3xl,.xwui-badge-xxxl) {
    min-width: 44px;
    height: 44px;
    padding: 0 var(--spacing-md, 16px);
    font-size: var(--font-size-lg, 1.4rem);
}
:is(.xwui-badge-4xl,.xwui-badge-xxxxl) {
    min-width: 70.4px;
    height: 70.4px;
    padding: 0 var(--spacing-md, 16px);
    font-size: var(--font-size-lg, 1.4rem);
}

/* Dot variant */
.xwui-badge-dot {
    min-width: auto;
    padding: 0;
}

.xwui-badge-dot:is(.xwui-badge-3xs,.xwui-badge-xxxs) {
    width: 3px;
    height: 3px;
}
.xwui-badge-dot:is(.xwui-badge-4xs,.xwui-badge-xxxxs) {
    width: 1.5px;
    height: 1.5px;
}

.xwui-badge-dot:is(.xwui-badge-2xs,.xwui-badge-xxs) {
    width: 4px;
    height: 4px;
}

.xwui-badge-dot.xwui-badge-xs {
    width: 5px;
    height: 5px;
}

.xwui-badge-dot:is(.xwui-badge-s,.xwui-badge-sm) {
    width: 6px;
    height: 6px;
}

.xwui-badge-dot:is(.xwui-badge-m,.xwui-badge-md) {
    width: 8px;
    height: 8px;
}

.xwui-badge-dot:is(.xwui-badge-l,.xwui-badge-lg) {
    width: 10px;
    height: 10px;
}

.xwui-badge-dot.xwui-badge-xl {
    width: 12px;
    height: 12px;
}

.xwui-badge-dot:is(.xwui-badge-2xl,.xwui-badge-xxl) {
    width: 16px;
    height: 16px;
}

.xwui-badge-dot:is(.xwui-badge-3xl,.xwui-badge-xxxl) {
    width: 20px;
    height: 20px;
}
.xwui-badge-dot:is(.xwui-badge-4xl,.xwui-badge-xxxxl) {
    width: 32px;
    height: 32px;
}

/* Legacy size aliases */
.xwui-badge-small { min-width: 16px; height: 16px; padding: 0 var(--spacing-xs, 4px); font-size: var(--font-size-xs, 0.625rem); }
.xwui-badge-medium { min-width: 20px; height: 20px; padding: 0 var(--spacing-xs, 6px); font-size: var(--font-size-xs, 0.75rem); }
.xwui-badge-large { min-width: 24px; height: 24px; padding: 0 var(--spacing-sm, 8px); font-size: var(--font-size-sm, 0.8125rem); }
.xwui-badge-dot.xwui-badge-small { width: 6px; height: 6px; }
.xwui-badge-dot.xwui-badge-medium { width: 8px; height: 8px; }
.xwui-badge-dot.xwui-badge-large { width: 10px; height: 10px; }

/* Color variants */
.xwui-badge-default {
    background: var(--bg-tertiary, #e9ecef);
    color: var(--text-primary, #212529);
}

.xwui-badge-primary {
    background: var(--accent-primary, #4f46e5);
    color: var(--text-inverse);
}

/* success/warning ink prefers --role-*-fg (dark ink tuned for these specific
   bright accent backgrounds) over --text-inverse - --text-inverse is white
   in both light AND dark theme, but --accent-success/--accent-warning stay
   bright in both too, so white text only reaches ~2.15-2.5:1. Found by the
   expanded color smoke test (Badge check). */
.xwui-badge-success {
    background: var(--accent-success, #10b981);
    color: var(--role-success-fg, var(--text-inverse));
}

.xwui-badge-warning {
    background: var(--accent-warning, #f59e0b);
    color: var(--role-warning-fg, var(--text-inverse));
}

.xwui-badge-error {
    background: var(--accent-error, #ef4444);
    color: var(--text-inverse);
}

/* Position variants (for use as overlay) */
.xwui-badge-top-right {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(50%, -50%);
}

.xwui-badge-top-left {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
}

.xwui-badge-bottom-right {
    position: absolute;
    bottom: 0;
    right: 0;
    transform: translate(50%, 50%);
}

.xwui-badge-bottom-left {
    position: absolute;
    bottom: 0;
    left: 0;
    transform: translate(-50%, 50%);
}

/* Badge container (wrapper for positioned badges) */
.xwui-badge-container {
    position: relative;
    display: inline-flex;
}

/* Animation for count changes */
@keyframes xwui-badge-pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

.xwui-badge-animate {
    animation: xwui-badge-pulse 0.3s ease;
}

/* Note: Dark theme support is handled automatically via theme/colors/{theme}.css files */