/* 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-xxs);

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

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

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

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

  .badge--md {
    font-size: var(--font-size-sm);
    padding-inline: var(--space-sm);
    padding-block: var(--space-xxs);
    min-height: 1.5rem;
  }

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

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

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

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

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

  /* Warning - Yellow/Orange */
  .badge--warning {
    background-color: var(--color-warning-light);
    color: var(--color-warning-dark);
  }

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

  /* Brand - Purple (primary color) */
  .badge--brand {
    background-color: var(--color-brand-light);
    color: var(--color-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-circle);
  }

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

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