/**
 * Fluid Framework - Badge Component
 * @layer components
 *
 * Small labels for status, categories, counts, and metadata.
 * Works standalone or positioned inside cards and other components.
 *
 * Usage:
 *   <span class="badge">Default</span>
 *   <span class="badge" data-variant="filled">Filled</span>
 *   <span class="badge" data-variant="outline">Outline</span>
 *   <span class="badge" data-status="good">Active</span>
 *   <span class="badge" data-status="warning">Pending</span>
 *   <span class="badge" data-status="error">Failed</span>
 *   <span class="badge" data-size="sm">Small</span>
 *   <span class="badge" data-size="lg">Large</span>
 */

@layer components {
  /* ========================================
     BASE BADGE
     ======================================== */

  /* The label voice in a 1px box: square (--radius-control), transparent. */
  .badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0.35em 0.6em;
    font: calc(600 + var(--_dark-weight)) var(--step--2) / 1.2 var(--font-body);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    border: var(--border-width) solid currentColor;
    border-radius: var(--radius-control);
    white-space: nowrap;
    vertical-align: middle;
    color: var(--color-text);
    background: transparent;
  }


  /* ========================================
     VARIANTS
     ======================================== */

  /* Filled - solid accent background */
  .badge[data-variant="filled"] {
    color: var(--on-accent);
    background: var(--accent);
    border-color: transparent;
  }

  /* Outline - border only */
  .badge[data-variant="outline"] {
    background: transparent;
    border: var(--border-width) solid currentColor;
  }

  /* Muted - subtle neutral tones */
  .badge[data-variant="muted"] {
    color: var(--color-text-muted);
    background: var(--color-surface);
    border-color: transparent;
  }


  /* ========================================
     STATUS COLORS
     Semantic states for indicators
     ======================================== */

  /* The status colours are text colours (4.5:1 on their own tint in light
     and dark); filled badges use the status fill and its on-colour. */
  .badge[data-status="good"] {
    color: var(--color-success);
    background: var(--color-success-subtle);
  }

  .badge[data-status="warning"] {
    color: var(--color-warning);
    background: var(--color-warning-subtle);
  }

  .badge[data-status="error"] {
    color: var(--color-error);
    background: var(--color-error-subtle);
  }

  .badge[data-status="info"] {
    color: var(--color-info);
    background: var(--color-info-subtle);
  }

  .badge[data-status="good"][data-variant="filled"] {
    color: var(--color-success-on);
    background: var(--color-success-fill);
  }

  .badge[data-status="warning"][data-variant="filled"] {
    color: var(--color-warning-on);
    background: var(--color-warning-fill);
  }

  .badge[data-status="error"][data-variant="filled"] {
    color: var(--color-error-on);
    background: var(--color-error-fill);
  }

  .badge[data-status="info"][data-variant="filled"] {
    color: var(--color-info-on);
    background: var(--color-info-fill);
  }


  /* ========================================
     SIZES
     ======================================== */

  .badge[data-size="sm"] {
    padding: 0.2em 0.45em;
    font-size: 0.6875rem;
  }

  .badge[data-size="lg"] {
    padding: 0.5em 0.8em;
    font-size: var(--step--1);
  }


  /* ========================================
     BADGE WITH DOT
     Status dot indicator before text
     ======================================== */

  .badge[data-dot]::before {
    content: "";
    inline-size: 0.375rem;
    block-size: 0.375rem;
    border-radius: var(--radius-full);
    background: currentColor;
    flex-shrink: 0;
  }


  /* ========================================
     BADGE COUNT
     Numeric counters (notifications, etc.)
     ======================================== */

  .badge[data-count] {
    min-inline-size: 1.5rem;
    justify-content: center;
    padding: var(--space-1);
    font-variant-numeric: tabular-nums;
  }



}