@use '../variables' as v;
@use '../mixins' as m;

// ─────────────────────────────────────────────
// Base badge
// ─────────────────────────────────────────────
.badge {
  @include m.badge-base;

  &--primary  { background: v.$primary-light;  color: v.$primary;  border: 1px solid v.$primary-border; }
  &--success  { background: v.$success-light;  color: v.$success;  border: 1px solid v.$success-border; }
  &--warning  { background: v.$warning-light;  color: v.$warning;  border: 1px solid v.$warning-border; }
  &--danger   { background: v.$danger-light;   color: v.$danger;   border: 1px solid v.$danger-border;  }
  &--info     { background: v.$info-light;     color: v.$info;     border: 1px solid v.$info-border;    }
  &--gray     { background: v.$gray-100;       color: v.$gray-600; border: 1px solid v.$gray-200;       }
  &--dark     { background: v.$gray-800;       color: v.$white;    border: 1px solid v.$gray-700;       }

  // Campaign status badges
  &--new       { background: v.$info-light;    color: v.$info;    border: 1px solid v.$info-border; }
  &--draft     { background: v.$gray-100;      color: v.$gray-500; border: 1px solid v.$gray-200; }
  &--scheduled { background: #faf0ff; color: #7c3aed; border: 1px solid #ddd6fe; }
  &--sending   { background: v.$warning-light; color: v.$warning;  border: 1px solid v.$warning-border; }
  &--sent      { background: v.$success-light; color: v.$success;  border: 1px solid v.$success-border; }
  &--paused    { background: v.$gray-100;      color: v.$gray-500; border: 1px solid v.$gray-200; }
  &--failed    { background: v.$danger-light;  color: v.$danger;   border: 1px solid v.$danger-border; }

  // Contact status
  &--subscribed   { background: v.$success-light;  color: v.$success;  border: 1px solid v.$success-border; }
  &--unsubscribed { background: v.$gray-100;        color: v.$gray-500; border: 1px solid v.$gray-200; }
  &--bounced      { background: v.$danger-light;    color: v.$danger;   border: 1px solid v.$danger-border; }
  &--complained   { background: v.$warning-light;   color: v.$warning;  border: 1px solid v.$warning-border; }

  // Verification
  &--deliverable  { background: v.$success-light;  color: v.$success;  border: 1px solid v.$success-border; }
  &--risky        { background: v.$warning-light;  color: v.$warning;  border: 1px solid v.$warning-border; }
  &--unverified   { background: v.$gray-100;       color: v.$gray-500; border: 1px solid v.$gray-200; }

  // A/B test
  &--ab { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
}

// Dot indicator
.badge-dot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: v.$font-size-sm;

  &::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: v.$radius-full;
    flex-shrink: 0;
  }

  &--online  { &::before { background: v.$success; } color: v.$gray-700; }
  &--offline { &::before { background: v.$gray-300; } color: v.$gray-500; }
  &--error   { &::before { background: v.$danger; } color: v.$gray-700; }
  &--warning { &::before { background: v.$warning; } color: v.$gray-700; }
}
