/* Material Design 3 Badge Component
 * ==========================================================================
 * MD3 Badges are used to convey dynamic information like counts or status
 * Reference: https://m3.material.io/components/badges
 */

/* Base Badge
 * -------------------------------------------------------------------------- */

.badge {
  /* Structure */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -4px;
  right: -4px;

  /* Sizing - Small by default */
  min-width: 6px;
  height: 6px;
  padding: 0;

  /* Appearance */
  border-radius: var(--radius-full);
  background: var(--color-error);
  color: var(--color-ink--error);

  /* Typography */
  font-size: 0.625rem; /* 11.25px with 18px base */
  font-weight: 500;
  line-height: 1;

  /* Ensure badge appears above content */
  z-index: var(--layer-base);
}

/* Badge with content (numbers/text)
 * -------------------------------------------------------------------------- */

.badge--with-content {
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
}

/* Large badge with content */
.badge--large {
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: var(--radius-full);
  font-size: 0.75rem; /* 13.5px with 18px base */
}

/* Badge Positioning
 * -------------------------------------------------------------------------- */

/* Parent element needs position: relative */
.badge-container {
  position: relative;
  display: inline-block;
}

/* Position variants */
.badge--top-left {
  top: -4px;
  right: auto;
  left: -4px;
}

.badge--bottom-right {
  top: auto;
  bottom: -4px;
  right: -4px;
}

.badge--bottom-left {
  top: auto;
  bottom: -4px;
  right: auto;
  left: -4px;
}

/* Inline badge (not positioned) */
.badge--inline {
  position: static;
  vertical-align: super;
  margin-left: 4px;
}

/* Badge Color Variants
 * -------------------------------------------------------------------------- */

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

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

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

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

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

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

/* Subtle variants with containers */
.badge--primary-subtle {
  background: var(--color-bg--primary-container);
  color: var(--color-ink--primary-container);
}

.badge--secondary-subtle {
  background: var(--color-bg--secondary-container);
  color: var(--color-ink--secondary-container);
}

.badge--tertiary-subtle {
  background: var(--color-bg--tertiary-container);
  color: var(--color-ink--tertiary-container);
}

.badge--error-subtle {
  background: var(--color-bg--error-container);
  color: var(--color-ink--error-container);
}

/* Badge on specific components
 * -------------------------------------------------------------------------- */

/* Badge on icon buttons */
.button--icon-only .badge {
  top: 0;
  right: 0;
}

/* Badge on avatars */
.avatar .badge {
  top: 0;
  right: 0;
  border: 2px solid var(--color-bg--canvas);
}

/* Badge on navigation items */
.nav-item .badge {
  position: static;
  margin-left: auto;
  margin-inline-start: 0.5rem;
}

/* Animated badge (for new notifications)
 * -------------------------------------------------------------------------- */

@keyframes badge-pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.25);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.badge--pulse {
  animation: badge-pulse 1s ease-in-out infinite;
}

.badge--new {
  animation: badge-pulse 0.5s ease-in-out 3;
}

/* Badge Groups (for multiple status indicators)
 * -------------------------------------------------------------------------- */

.badge-group {
  display: inline-flex;
  gap: 0.25rem;
}

.badge-group .badge {
  position: static;
}

/* Accessibility
 * -------------------------------------------------------------------------- */

/* Screen reader only text */
.badge__sr-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Examples of usage:
 * --------------------------------------------------------------------------
 *
 * Simple dot badge:
 * <span class="badge-container">
 *   <button>Notifications</button>
 *   <span class="badge"></span>
 * </span>
 *
 * Badge with count:
 * <span class="badge-container">
 *   <button>Messages</button>
 *   <span class="badge badge--with-content">5</span>
 * </span>
 *
 * Badge on avatar:
 * <div class="avatar badge-container">
 *   <img src="..." alt="User">
 *   <span class="badge badge--success"></span>
 * </div>
 *
 * Inline badge:
 * <span>Updates available <span class="badge badge--inline badge--with-content">3</span></span>
 */