/* Badge Component */

/* Status indicators with semantic colors */

@layer components {
  /* ============================================
     BASE BADGE
     ============================================ */
  .badge {
    /* Layout */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);

    /* Typography */
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    line-height: 1;
    text-align: center;
    white-space: nowrap;

    /* Appearance */
    border-radius: var(--radius-pill);
    padding-inline: var(--space-3);
    padding-block: var(--space-1);

    /* Default height */
    min-height: 1.5rem;
  }

  /* ============================================
     SIZE VARIANTS
     ============================================ */
  .badge--sm {
    font-size: var(--text-2xs);
    padding-inline: var(--space-2);
    padding-block: 0.125rem;
    min-height: 1.25rem;
  }

  .badge--md {
    font-size: var(--text-xs);
    padding-inline: var(--space-3);
    padding-block: var(--space-1);
    min-height: 1.5rem;
  }

  .badge--lg {
    font-size: var(--text-md);
    padding-inline: var(--space-4);
    padding-block: var(--space-2);
    min-height: 2rem;
  }

  /* ============================================
     VARIANT COLORS
     ============================================ */

  /* Neutral - Default gray */
  .badge--neutral {
    background-color: var(--neutral-100);
    color: var(--neutral-600);
  }

  /* Info - Blue */
  .badge--info {
    background-color: var(--info-soft);
    color: var(--info);
  }

  /* Success - Teal/Green */
  .badge--success {
    background-color: var(--brand-soft);
    color: var(--brand);
  }

  /* Warning - Yellow/Orange */
  .badge--warning {
    background-color: var(--caution-soft);
    color: var(--caution-strong);
  }

  /* Error - Red */
  .badge--error {
    background-color: var(--danger-soft);
    color: var(--danger);
  }

  /* Brand - Purple (primary color) */
  .badge--brand {
    background-color: var(--brand-soft);
    color: var(--brand);
  }

  /* ============================================
     ICON
     ============================================ */
  .badge__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
  }

  .badge__icon svg {
    width: 100%;
    height: 100%;
    fill: currentcolor;
  }

  /* ============================================
     DOT VARIANT (small status indicator)
     ============================================ */
  .badge--dot {
    width: 0.5rem;
    height: 0.5rem;
    padding: 0;
    min-height: 0;
    border-radius: var(--radius-full);
  }

  .badge--dot .badge__text {
    display: none;
  }

  .badge--dot .badge__icon {
    display: none;
  }
}