/* src/components/basic/XWUITag/XWUITag.css */
/**
 * XWUITag Component Styles
 * Base tag component - simple, lightweight tag display
 * 
 * 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)
 * - Lines: theme/lines/balanced.css (global border widths)
 * - Roundness: theme/roundness/container/*.css (component-specific roundness)
 * - Typography: theme/typography/*.css
 */

.xwui-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-tag, var(--radius-sm, 4px));
    font-weight: var(--font-weight-medium, 500);
    white-space: nowrap;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

/* Variants */
.xwui-tag-default {
    background: var(--bg-tag-default, var(--bg-secondary, #f8f9fa));
    color: var(--text-tag-default, var(--text-secondary, #6c757d));
    border: var(--border-tag-width, var(--border-width-thin, 1px)) var(--border-tag-style, solid) var(--border-tag-color, var(--border-color, #dee2e6));
}

/* Primary ink falls back through --role-primary-fg (dark ink), same as
   success/warning below - most accent-primary values are saturated enough
   for white text, but a handful (e.g. accent "chalk", #fafafa) are near-white
   surfaces where white text disappears entirely. */
.xwui-tag-primary {
    background: var(--bg-tag-primary, var(--accent-primary, #1890ff));
    color: var(--text-tag-primary, var(--role-primary-fg, #ffffff));
    border: var(--border-tag-width, var(--border-width-thin, 1px)) var(--border-tag-style, solid) var(--border-tag-primary-color, var(--accent-primary, #1890ff));
}

/* success/warning ink falls back through --role-*-fg (dark ink tuned for
   these specific bright accent backgrounds) rather than straight to white - these backgrounds are bright enough that white text falls short of AA
   contrast. Found by the expanded color smoke test (Tag check).

   The fills read --accent-success / --accent-warning / --accent-error. Nothing
   defines --color-success / --color-warning / --color-error (they stay in the
   chain as a per-site override), so these rules used to resolve to the literal
   hex at the end of the chain on every page: a status tag ignored the accent,
   and the error tag painted white on #ff4d4f, 3.27:1. The accent layer carries
   an AA-corrected status fill and its ink (--accent-error with --role-danger-fg
   is swept by validate-theme-contrast), so the tag now uses the same pairs the
   buttons do. The trailing hex only paints when no accent sheet is loaded at
   all. XWUITag.contrast.test.ts measures every variant against every accent. */
.xwui-tag-success {
    background: var(--bg-tag-success, var(--color-success, var(--accent-success, #52c41a)));
    color: var(--text-tag-success, var(--role-success-fg, #ffffff));
    border: var(--border-tag-width, var(--border-width-thin, 1px)) var(--border-tag-style, solid) var(--border-tag-success-color, var(--color-success, var(--accent-success, #52c41a)));
}

.xwui-tag-warning {
    background: var(--bg-tag-warning, var(--color-warning, var(--accent-warning, #faad14)));
    color: var(--text-tag-warning, var(--role-warning-fg, #ffffff));
    border: var(--border-tag-width, var(--border-width-thin, 1px)) var(--border-tag-style, solid) var(--border-tag-warning-color, var(--color-warning, var(--accent-warning, #faad14)));
}

.xwui-tag-error {
    background: var(--bg-tag-error, var(--color-error, var(--accent-error, #ff4d4f)));
    color: var(--text-tag-error, var(--role-danger-fg, #ffffff));
    border: var(--border-tag-width, var(--border-width-thin, 1px)) var(--border-tag-style, solid) var(--border-tag-error-color, var(--color-error, var(--accent-error, #ff4d4f)));
}

/* Sizes. Every metric is a token (--xwui-tag-<size>-font-size|pad-y|pad-x) whose
   fallback is the value this rule painted before the tokens existed. */
.xwui-tag-small {
    padding: var(--xwui-tag-small-pad-y, var(--spacing-tag-small-y, 0.125rem)) var(--xwui-tag-small-pad-x, var(--spacing-tag-small-x, 0.5rem));
    font-size: var(--xwui-tag-small-font-size, var(--font-size-xs, 0.75rem));
    line-height: 1.4;
}

.xwui-tag-medium {
    padding: var(--xwui-tag-medium-pad-y, var(--spacing-tag-medium-y, 0.25rem)) var(--xwui-tag-medium-pad-x, var(--spacing-tag-medium-x, 0.75rem));
    font-size: var(--xwui-tag-medium-font-size, var(--font-size-sm, 0.875rem));
    line-height: 1.4;
}

.xwui-tag-large {
    padding: var(--xwui-tag-large-pad-y, var(--spacing-tag-large-y, 0.375rem)) var(--xwui-tag-large-pad-x, var(--spacing-tag-large-x, 1rem));
    font-size: var(--xwui-tag-large-font-size, var(--font-size-base, 1rem));
    line-height: 1.5;
}

/* The compact steps (status and kind labels in dense rows). WHY `.xwui-tag.` and
   the explicit letter-spacing / weight / label case: XWUIDisplayTag.css styles
   `.xwui-tag-xs` and `.xwui-tag-xxs` globally (tracking .04em, weight 600,
   upper-case label), and both sheets can be on one page. The doubled selector
   outranks it, and every property it sets is set here too, so an XWUITag
   reads the same whether or not that sheet loaded. */
.xwui-tag.xwui-tag-xxs {
    padding: var(--xwui-tag-xxs-pad-y, 0.125rem) var(--xwui-tag-xxs-pad-x, 0.375rem);
    font-size: var(--xwui-tag-xxs-font-size, 0.59375rem);
    line-height: var(--xwui-tag-xxs-line-height, 1.3);
    border-radius: var(--xwui-tag-xxs-radius, var(--radius-tag, var(--radius-sm, 4px)));
    letter-spacing: var(--xwui-tag-xxs-tracking, normal);
    font-weight: var(--font-weight-medium, 500);
}

.xwui-tag.xwui-tag-xs {
    padding: var(--xwui-tag-xs-pad-y, 0.1875rem) var(--xwui-tag-xs-pad-x, 0.4375rem);
    font-size: var(--xwui-tag-xs-font-size, 0.625rem);
    line-height: var(--xwui-tag-xs-line-height, 1.3);
    border-radius: var(--xwui-tag-xs-radius, var(--radius-tag, var(--radius-sm, 4px)));
    letter-spacing: var(--xwui-tag-xs-tracking, normal);
    font-weight: var(--font-weight-medium, 500);
}

.xwui-tag.xwui-tag-xxs .xwui-tag-label,
.xwui-tag.xwui-tag-xs .xwui-tag-label {
    text-transform: inherit;
}

.xwui-tag-label {
    display: inline-block;
}

/* ------------------------------------------------------------------ opt-in options
   Every rule below keys off a class the view adds only when its option is set,
   so a tag configured the old way paints exactly as before. Doubled
   `.xwui-tag.` selectors outrank the single-class variant rules above. */

/* Hue each variant lends to soft / outline / text (a tone's inline
   --xwui-tag-hue wins over these). */
.xwui-tag-default:is(.xwui-tag-soft, .xwui-tag-outline, .xwui-tag-text) { --xwui-tag-variant-hue: var(--text-secondary, #6c757d); }
.xwui-tag-primary:is(.xwui-tag-soft, .xwui-tag-outline, .xwui-tag-text) { --xwui-tag-variant-hue: var(--accent-primary, #1890ff); }
.xwui-tag-success:is(.xwui-tag-soft, .xwui-tag-outline, .xwui-tag-text) { --xwui-tag-variant-hue: var(--accent-success, #52c41a); }
.xwui-tag-warning:is(.xwui-tag-soft, .xwui-tag-outline, .xwui-tag-text) { --xwui-tag-variant-hue: var(--accent-warning, #faad14); }
.xwui-tag-error:is(.xwui-tag-soft, .xwui-tag-outline, .xwui-tag-text) { --xwui-tag-variant-hue: var(--accent-error, #ff4d4f); }

/* tone: solid paints the tone's bg / fg / border; the border falls back to the
   fill (one solid shape), the fill to the hue. */
.xwui-tag.xwui-tag-toned {
    background: var(--xwui-tag-bg, var(--xwui-tag-hue));
    color: var(--xwui-tag-fg, var(--xwui-tag-solid-ink, #ffffff));
    border-color: var(--xwui-tag-border, var(--xwui-tag-bg, var(--xwui-tag-hue)));
}

/* soft / outline / text ink. WHY a mix toward --text-primary instead of the bare
   hue: a status hue as text on a light ground fails AA (accent-warning on white
   is under 2:1). Mixing it toward the theme's own text colour darkens it on light
   grounds and lightens it on dark ones, so one rule clears 4.5:1 in both
   (XWUITag.contrast.test.ts measures every variant, theme and accent). A tone
   that defines --xwui-tag-<tone>-fg paints that instead. */
.xwui-tag:is(.xwui-tag-soft, .xwui-tag-outline, .xwui-tag-text) {
    --xwui-tag-ink: color-mix(in srgb, var(--xwui-tag-hue, var(--xwui-tag-variant-hue)) var(--xwui-tag-ink-mix, 35%), var(--text-primary, #212529));
}

/* soft: a fill and no border at all (border-width 0, so the size step's
   padding is the whole box, as dense label rows draw it). */
.xwui-tag.xwui-tag-soft {
    background: var(--xwui-tag-bg, color-mix(in srgb, var(--xwui-tag-hue, var(--xwui-tag-variant-hue)) var(--xwui-tag-soft-mix, 16%), transparent));
    color: var(--xwui-tag-fg, var(--xwui-tag-ink));
    border-width: 0;
}

/* outline: border in the hue, no fill. */
.xwui-tag.xwui-tag-outline {
    background: transparent;
    color: var(--xwui-tag-fg, var(--xwui-tag-ink));
    border-color: var(--xwui-tag-border, var(--xwui-tag-hue, var(--xwui-tag-variant-hue)));
}

/* text: the colour alone (status words with a leading dot). */
.xwui-tag.xwui-tag-text {
    background: transparent;
    color: var(--xwui-tag-fg, var(--xwui-tag-ink));
    border-width: 0;
    padding-inline: 0;
}

.xwui-tag.xwui-tag-mono {
    font-family: var(--xwui-tag-mono-font, var(--font-family-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace));
}

.xwui-tag.xwui-tag-caps {
    text-transform: uppercase;
    letter-spacing: var(--xwui-tag-caps-tracking, 0.06em);
}

.xwui-tag.xwui-tag-weight-500 { font-weight: 500; }
.xwui-tag.xwui-tag-weight-600 { font-weight: 600; }
.xwui-tag.xwui-tag-weight-700 { font-weight: 700; }

.xwui-tag.xwui-tag-pill {
    border-radius: var(--xwui-tag-pill-radius, 999px);
}

/* Leading parts: the dot and the icon sit before the label with one gap. */
.xwui-tag:has(> .xwui-tag-status-dot, > .xwui-tag-icon) {
    gap: var(--xwui-tag-gap, 0.375em);
}

.xwui-tag-status-dot {
    display: inline-block;
    flex: none;
    inline-size: var(--xwui-tag-dot-size, 7px);
    block-size: var(--xwui-tag-dot-size, 7px);
    border-radius: 50%;
    background: var(--xwui-tag-dot-color, currentColor);
}

.xwui-tag-dot-glow .xwui-tag-status-dot,
.xwui-tag-dot-pulse .xwui-tag-status-dot {
    box-shadow: 0 0 var(--xwui-tag-dot-glow, 8px) var(--xwui-tag-dot-color, currentColor);
}

.xwui-tag-dot-pulse .xwui-tag-status-dot {
    animation: xwui-tag-dot-pulse var(--xwui-tag-dot-pulse-duration, 1.6s) ease-in-out infinite;
}

@keyframes xwui-tag-dot-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

@media (prefers-reduced-motion: reduce) {
    .xwui-tag-dot-pulse .xwui-tag-status-dot {
        animation: none;
    }
}

.xwui-tag-icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    inline-size: var(--xwui-tag-icon-size, 1em);
    block-size: var(--xwui-tag-icon-size, 1em);
}

.xwui-tag-icon svg {
    inline-size: 100%;
    block-size: 100%;
}

/* Hidden accessible name (ariaLabel); the visible label is aria-hidden then. */
.xwui-tag-sr {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

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