/*
 * Badge styles - Premium refined look
 */

@layer components {
  .badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2_5);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    line-height: 1;
    border-radius: var(--radius-md);
    white-space: nowrap;
    letter-spacing: 0.01em;
    
    /* Support for dynamic color via CSS variable */
    &[style*="--badge-color"] {
      color: var(--badge-color);
      background-color: color-mix(in srgb, var(--badge-color) 15%, transparent);
    }
  }

  .badge-pill {
    border-radius: var(--radius-full);
  }

  .badge-muted {
    color: var(--color-ink-muted);
    background-color: var(--color-surface-muted);
    border: 1px solid var(--color-border-muted);
  }

  .badge-primary {
    color: var(--color-ink-reversed);
    background-color: var(--color-primary);
  }

  .badge-positive,
  .badge-success {
    color: var(--color-positive);
    background-color: var(--color-positive-canvas);
  }

  .badge-negative,
  .badge-danger {
    color: var(--color-negative);
    background-color: var(--color-negative-canvas);
  }

  .badge-warning {
    color: var(--color-warning);
    background-color: var(--color-warning-canvas);
  }

  .badge-info {
    color: var(--color-info);
    background-color: var(--color-info-canvas);
  }

  /* Category badges for releases */
  .badge-feature {
    color: var(--color-feature);
    background-color: color-mix(in oklch, var(--color-feature) 15%, var(--color-surface));
  }

  .badge-improvement {
    color: var(--color-improvement);
    background-color: color-mix(in oklch, var(--color-improvement) 15%, var(--color-surface));
  }

  .badge-fix {
    color: var(--color-fix);
    background-color: color-mix(in oklch, var(--color-fix) 15%, var(--color-surface));
  }

  .badge-security {
    color: var(--color-security);
    background-color: color-mix(in oklch, var(--color-security) 15%, var(--color-surface));
  }

  .badge-deprecation {
    color: var(--color-deprecation);
    background-color: color-mix(in oklch, var(--color-deprecation) 15%, var(--color-surface));
  }
}