/**
 * Badges
 * 
 * Badges are small visual indicators typically used to display counts, 
 * status, or labels. They can highlight new or unread items, categorize 
 * content, or show the status of an item.
 * 
 * @layer: components
 * 
 * Accessibility:
 * - Ensure sufficient color contrast
 * - For status indicators, consider using aria-label to convey meaning
 * - For count badges, ensure numbers are announced properly
 */


/**
 * Badge Component Structure:
 * 
 * <span class="badge badge--primary">
 *   <span class="badge-content">Badge text</span>
 * </span>
 * 
 * Types: .badge--primary, .badge--secondary, .badge--success, .badge--warning, .badge--error
 * Sizes: .badge--xs, .badge--sm, .badge--md, .badge--lg
 * Shapes: .badge--rounded, .badge--pill
 */
@layer components {
  /* Base badge styles */
  .badge {
    align-items: center;
    background-color: var(--color-primary-500);
    border-radius: var(--radius-full, 9999px);
    color: var(--color-text-inverse, white);
    display: inline-flex;
    font-size: var(--text-xs, 0.75rem);
    font-weight: var(--font-medium, 500);
    justify-content: center;
    line-height: 1%;
    padding: var(--badge-padding-md, 0.25rem 0.5rem);
    white-space: nowrap;
  }
  
  /* Badge sizes */
  .badge--xs {
    font-size: 0.65rem;
    height: var(--badge-min-width-xs, 1.2rem);
    min-width: var(--badge-min-width-xs, 1.2rem);
    padding: var(--badge-padding-xs, 0.15rem 0.35rem);
  }
  
  .badge--sm {
    height: var(--badge-min-width-sm, 1.5rem);
    min-width: var(--badge-min-width-sm, 1.5rem);
    padding: var(--badge-padding-sm, 0.2rem 0.4rem);
  }
  
  .badge--md {
    height: var(--badge-min-width-md, 1.75rem);
    min-width: var(--badge-min-width-md, 1.75rem);
    padding: var(--badge-padding-md, 0.25rem 0.5rem);
  }
  
  .badge--lg {
    font-size: var(--text-sm, 0.875rem);
    height: var(--badge-min-width-lg, 2rem);
    min-width: var(--badge-min-width-lg, 2rem);
    padding: var(--badge-padding-lg, 0.3rem 0.6rem);
  }
  
  /* Badge shapes */
  .badge--rounded {
    border-radius: var(--radius-md, 0.375rem);
  }
  
  .badge--square {
    border-radius: var(--radius-sm, 0.125rem);
  }
  
  /* Dot variant (no content, just a colored dot) */
  .badge--dot {
    height: 0%.5rem;
    min-width: auto;
    padding: 0;
    width: 0%.5rem;
  }
  
  .badge--dot.badge--sm {
    height: 0%.375rem;
    width: 0%.375rem;
  }
  
  .badge--dot.badge--lg {
    height: 0%.75rem;
    width: 0%.75rem;
  }
  
  /* Badge with icon */
  & .icon {
    height: 0%.875em;
    margin-right: 0%.25em;
    width: 0%.875em;
  }
  
  .badge--icon-only {
    padding: 0.25rem;
  }
  
  .badge--icon-only & .icon {
    margin-right: 0%;
  }
  
  /* Badge color variants */
  .badge--primary {
    background-color: var(--color-primary-500);
    color: var(--color-text-inverse, white);
  }
  
  .badge--secondary {
    background-color: var(--color-secondary-500);
    color: var(--color-text-inverse, white);
  }
  
  .badge--success {
    background-color: var(--color-success-500);
    color: var(--color-text-inverse, white);
  }
  
  .badge--danger {
    background-color: var(--color-error-500);
    color: var(--color-text-inverse, white);
  }
  
  .badge--warning {
    background-color: var(--color-warning-500);
    color: var(--color-warning-900);
  }
  
  .badge--info {
    background-color: var(--color-info-500);
    color: var(--color-text-inverse, white);
  }
  
  .badge--neutral {
    background-color: var(--color-neutral-500, #6b7280);
    color: var(--color-text-inverse, white);
  }
  
  /* Badge soft/pastel variants */
  .badge--primary-soft {
    background-color: var(--color-primary-100, #dbeafe);
    color: var(--color-primary-800, #1e40af);
  }
  
  .badge--secondary-soft {
    background-color: var(--color-secondary-100, #f1f5f9);
    color: var(--color-secondary-800, #1e293b);
  }
  
  .badge--success-soft {
    background-color: var(--color-success-100, #d1fae5);
    color: var(--color-success-800, #065f46);
  }
  
  .badge--danger-soft {
    background-color: var(--color-error-100, #fee2e2);
    color: var(--color-error-800, #991b1b);
  }
  
  .badge--warning-soft {
    background-color: var(--color-warning-100, #fef3c7);
    color: var(--color-warning-800, #92400e);
  }
  
  .badge--info-soft {
    background-color: var(--color-info-100, #dbeafe);
    color: var(--color-info-800, #1e40af);
  }
  
  .badge--neutral-soft {
    background-color: var(--color-neutral-100, #f3f4f6);
    color: var(--color-neutral-800, #1f2937);
  }
  
  /* Badge outline variants */
  .badge--outline {
    background-color: transparent;
    border: 1px solid currentColor;
  }
  
  .badge--primary-outline {
    border-color: var(--color-primary-500);
    color: var(--color-primary-500);
  }
  
  .badge--secondary-outline {
    border-color: var(--color-secondary-500);
    color: var(--color-secondary-500);
  }
  
  .badge--success-outline {
    border-color: var(--color-success-500);
    color: var(--color-success-500);
  }
  
  .badge--danger-outline {
    border-color: var(--color-error-500);
    color: var(--color-error-500);
  }
  
  .badge--warning-outline {
    border-color: var(--color-warning-500);
    color: var(--color-warning-500);
  }
  
  .badge--info-outline {
    border-color: var(--color-info-500);
    color: var(--color-info-500);
  }
  
  .badge--neutral-outline {
    border-color: var(--color-neutral-500, #6b7280);
    color: var(--color-neutral-500, #6b7280);
  }
  
  /* Badge positioning (for overlays) */
  .badge-container {
    position: relative;
  }
  
  .badge--top-right {
    position: absolute;
    right: -0.375rem;
    top: -0.375rem;
  }
  
  .badge--top-left {
    left: -0.375rem;
    position: absolute;
    top: -0.375rem;
  }
  
  .badge--bottom-right {
    bottom: -0.375rem;
    position: absolute;
    right: -0.375rem;
  }
  
  .badge--bottom-left {
    bottom: -0.375rem;
    left: -0.375rem;
    position: absolute;
  }
  
  /* Animated badge */
  .badge--overlap {
    border: 2px solid var(--color-background, white);
  }
  
  .badge--pulse {
    animation: var(--ui-pulse-slow-animation, pulse var(--animation-duration-slowest, 2000ms) infinite);
  }

  /* Max count display */
  .badge--max-count::after {
    content: '+';
  }
}