/* src/components/basic/XWUIBadge/XWUIBadge.css */
/**
 * XWUIBadge 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. Every metric is a token (--xwui-badge-<size>-size | -font-size |
   -pad-x | -dot-size) whose fallback is the value this rule painted before. */
.xwui-badge-small {
    min-width: var(--xwui-badge-small-size, 16px);
    height: var(--xwui-badge-small-size, 16px);
    padding: 0 var(--xwui-badge-small-pad-x, var(--spacing-xs, 4px));
    font-size: var(--xwui-badge-small-font-size, var(--font-size-xs, 0.625rem));
}

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

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

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

.xwui-badge-dot.xwui-badge-small {
    width: var(--xwui-badge-small-dot-size, 6px);
    height: var(--xwui-badge-small-dot-size, 6px);
}

.xwui-badge-dot.xwui-badge-medium {
    width: var(--xwui-badge-medium-dot-size, 8px);
    height: var(--xwui-badge-medium-dot-size, 8px);
}

.xwui-badge-dot.xwui-badge-large {
    width: var(--xwui-badge-large-dot-size, 10px);
    height: var(--xwui-badge-large-dot-size, 10px);
}

/* A dot badge is a fixed-diameter CIRCLE. The size classes (.xwui-badge-medium etc., plus
   the generated canonical sizes) set a min-width that is emitted AFTER the `.xwui-badge-dot`
   reset, so their min-width would otherwise WIN and stretch the dot into a flat pill. This
   higher-specificity reset (.xwui-badge.xwui-badge-dot = 0,2,0) beats the size rules (0,1,0)
   so every dot stays perfectly round regardless of size class. */
.xwui-badge.xwui-badge-dot {
    min-width: 0;
}

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

.xwui-badge-primary {
    --xwui-badge-variant-hue: var(--accent-primary, #4f46e5);
    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 - see XWUIDisplayBadge.css
   for the full rationale. Found by the expanded color smoke test. */
.xwui-badge-success {
    --xwui-badge-variant-hue: var(--accent-success, #10b981);
    background: var(--accent-success, #10b981);
    color: var(--role-success-fg, var(--text-inverse));
}

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

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

/* info / accent: the two further hues a count or status dot needs (a neutral
   notice and the brand accent on a non-primary surface). */
.xwui-badge-info {
    --xwui-badge-variant-hue: var(--accent-info, var(--accent-primary, #3b82f6));
    background: var(--xwui-badge-variant-hue);
    color: var(--role-primary-fg, var(--text-inverse, #ffffff));
}

.xwui-badge-accent {
    --xwui-badge-variant-hue: var(--accent-secondary, var(--accent-primary, #4f46e5));
    background: var(--xwui-badge-variant-hue);
    color: var(--role-primary-fg, var(--text-inverse, #ffffff));
}

/* Beta variant · a small attention-getting pill for marking in-progress
   features. The glow/pulse is decorative only - it never carries meaning
   on its own, so it's safe to reduce for prefers-reduced-motion. */
.xwui-badge-beta {
    background: linear-gradient(90deg, var(--accent-warning, #fbbf24), var(--accent-warning-strong, #f59e0b));
    color: var(--text-inverse);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    box-shadow: 0 0 6px color-mix(in srgb, var(--accent-warning, #f59e0b) 60%, transparent),
        0 0 12px color-mix(in srgb, var(--accent-warning, #f59e0b) 35%, transparent);
    animation: xwui-badge-beta-pulse 2.4s ease-in-out infinite;
}

@keyframes xwui-badge-beta-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.75; }
}

@media (prefers-reduced-motion: reduce) {
    .xwui-badge-beta {
        animation: none;
    }
}

/* 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 var(--motion-duration-normal, 0.3s) var(--motion-easing-standard, ease);
}

/* ------------------------------------------------------------------ opt-in options
   Every rule below keys off a class the view adds only when its option is set,
   so a badge configured the old way paints exactly as before. */

/* tone: the site's --xwui-badge-<tone>-bg / -fg (inline on the element). */
.xwui-badge.xwui-badge-toned {
    background: var(--xwui-badge-bg, var(--xwui-badge-hue));
    color: var(--xwui-badge-fg, var(--text-inverse, #ffffff));
}

.xwui-badge.xwui-badge-rounded {
    border-radius: var(--xwui-badge-rounded-radius, 6px);
}

.xwui-badge.xwui-badge-mono {
    font-family: var(--xwui-badge-mono-font, var(--font-family-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace));
    font-variant-numeric: tabular-nums;
}

/* ring and glow share box-shadow, so each contributes one layer and one rule
   paints both when both are set. */
.xwui-badge.xwui-badge-ring {
    --xwui-badge-ring-layer: 0 0 0 var(--xwui-badge-ring-width, 2px) var(--xwui-badge-ring-color, var(--bg-primary, #ffffff));
}

.xwui-badge.xwui-badge-glow {
    --xwui-badge-glow-layer: 0 0 var(--xwui-badge-glow-blur, 10px) var(--xwui-badge-glow-color, var(--xwui-badge-hue, var(--xwui-badge-variant-hue, currentColor)));
}

.xwui-badge.xwui-badge-ring,
.xwui-badge.xwui-badge-glow {
    box-shadow: var(--xwui-badge-ring-layer, 0 0 #0000), var(--xwui-badge-glow-layer, 0 0 #0000);
}

/* inset: the badge sits INSIDE the corner (an avatar's online dot, a rail
   count), no centring translate. The horizontal side is logical so an RTL page
   mirrors it: right means inline-end. Physical left/right are reset first. */
.xwui-badge.xwui-badge-inset {
    transform: none;
    left: auto;
    right: auto;
}

.xwui-badge.xwui-badge-inset.xwui-badge-top-right { top: var(--xwui-badge-inset-y, 0); bottom: auto; inset-inline-end: var(--xwui-badge-inset-x, 0); }
.xwui-badge.xwui-badge-inset.xwui-badge-top-left { top: var(--xwui-badge-inset-y, 0); bottom: auto; inset-inline-start: var(--xwui-badge-inset-x, 0); }
.xwui-badge.xwui-badge-inset.xwui-badge-bottom-right { bottom: var(--xwui-badge-inset-y, 0); top: auto; inset-inline-end: var(--xwui-badge-inset-x, 0); }
.xwui-badge.xwui-badge-inset.xwui-badge-bottom-left { bottom: var(--xwui-badge-inset-y, 0); top: auto; inset-inline-start: var(--xwui-badge-inset-x, 0); }

/* pulse: ping is an expanding ring drawn by ::after; blink fades the badge.
   A standalone badge becomes the ring's containing block. */
.xwui-badge.xwui-badge-pulse-ping:not(.xwui-badge-top-right, .xwui-badge-top-left, .xwui-badge-bottom-right, .xwui-badge-bottom-left) {
    position: relative;
}

.xwui-badge.xwui-badge-pulse-ping::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    animation: xwui-badge-ping var(--xwui-badge-pulse-duration, 1.8s) ease-out infinite;
    pointer-events: none;
}

.xwui-badge.xwui-badge-pulse-blink {
    animation: xwui-badge-blink var(--xwui-badge-pulse-duration, 1.4s) ease-in-out infinite;
}

@keyframes xwui-badge-ping {
    0% { box-shadow: 0 0 0 0 var(--xwui-badge-glow-color, var(--xwui-badge-hue, var(--xwui-badge-variant-hue, currentColor))); opacity: 0.7; }
    100% { box-shadow: 0 0 0 var(--xwui-badge-ping-spread, 6px) var(--xwui-badge-glow-color, var(--xwui-badge-hue, var(--xwui-badge-variant-hue, currentColor))); opacity: 0; }
}

@keyframes xwui-badge-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
    .xwui-badge.xwui-badge-pulse-ping::after,
    .xwui-badge.xwui-badge-pulse-blink {
        animation: none;
    }
}

/* What XWUIBadge.projectView emits for a badge with nothing to show. */
.xwui-badge-hidden {
    display: none;
}

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