/**
 * Badges Component
 * Structure only - colors applied in colors.css
 */

/* Base badge */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  line-height: 1;
  border-radius: var(--radius-full);
  white-space: nowrap;
  vertical-align: middle;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  /* Colors applied in colors.css */
}

/* Badge sizes */
.badge-sm {
  padding: 2px var(--space-2);
  font-size: 0.625rem;
}

.badge-md {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
}

.badge-lg {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
}

/* Badge variants */
.badge-primary {
  /* Colors applied in colors.css */
}

.badge-secondary {
  /* Colors applied in colors.css */
}

.badge-success {
  /* Colors applied in colors.css */
}

.badge-warning {
  /* Colors applied in colors.css */
}

.badge-danger,
.badge-error {
  /* Colors applied in colors.css */
}

.badge-info {
  /* Colors applied in colors.css */
}

/* Badge with dot */
.badge-dot {
  padding-left: var(--space-2);
}

.badge-dot::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  margin-right: var(--space-1);
  /* Background applied in colors.css */
}

/* Badge with icon */
.badge i,
.badge svg {
  width: 0.875em;
  height: 0.875em;
}

/* Badge outline style */
.badge-outline {
  background: transparent;
  border-width: 1px;
  border-style: solid;
  /* Border and text colors applied in colors.css */
}

/* Badge pill (rounded rectangle) */
.badge-pill {
  border-radius: var(--radius-md);
}

/* Badge square */
.badge-square {
  border-radius: var(--radius-sm);
}

/* Badge group */
.badge-group {
  display: inline-flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* Status badge (with pulsing dot) */
.badge-status {
  position: relative;
}

.badge-status::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  /* Background applied in colors.css */
}

.badge-status.pulse::before {
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* Notification badge (counter) */
.badge-notification {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 20px;
  height: 20px;
  padding: 2px 6px;
  font-size: 0.625rem;
  line-height: 1.2;
  z-index: 10;
  /* Colors applied in colors.css */
}

/* Badge on buttons */
.btn .badge {
  margin-left: var(--space-2);
}

/* Status indicator badges */
.status-online {
  /* Colors applied in colors.css */
}

.status-offline {
  /* Colors applied in colors.css */
}

.status-away {
  /* Colors applied in colors.css */
}

.status-busy {
  /* Colors applied in colors.css */
}

/* Project/task status badges */
.status-pending {
  /* Colors applied in colors.css */
}

.status-in-progress {
  /* Colors applied in colors.css */
}

.status-completed {
  /* Colors applied in colors.css */
}

.status-cancelled {
  /* Colors applied in colors.css */
}

/* Priority badges */
.priority-low {
  /* Colors applied in colors.css */
}

.priority-medium {
  /* Colors applied in colors.css */
}

.priority-high {
  /* Colors applied in colors.css */
}

.priority-critical {
  /* Colors applied in colors.css */
}

/* Responsive */
@media (max-width: 768px) {
  .badge {
    font-size: 0.625rem;
    padding: 2px var(--space-2);
  }

  .badge-lg {
    font-size: var(--text-xs);
    padding: var(--space-1) var(--space-3);
  }
}