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

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

  &--primary  { background: var(--active-bg);  color: var(--active-text);  border: 1px solid var(--border-color); }
  &--success  { background: var(--success-light);  color: var(--success);  border: 1px solid var(--success-border); }
  &--warning  { background: var(--warning-light);  color: var(--warning);  border: 1px solid var(--warning-border); }
  &--danger   { background: var(--danger-light);   color: var(--danger);   border: 1px solid var(--danger-border);  }
  &--info     { background: var(--info-light);     color: var(--info);     border: 1px solid var(--info-border);    }
  &--gray     { background: var(--gray-100);       color: var(--gray-500); border: 1px solid var(--gray-200);       }
  &--dark     { background: var(--gray-600);       color: var(--bg-surface); border: 1px solid var(--gray-500);       }

  // Campaign status badges
  &--new       { background: var(--info-light);    color: var(--info);    border: 1px solid var(--info-border); }
  &--draft     { background: var(--gray-100);      color: var(--gray-500); border: 1px solid var(--gray-200); }
  &--scheduled { background: rgba(124, 58, 237, 0.12); color: #a78bfa; border: 1px solid rgba(124, 58, 237, 0.25); }
  &--sending   { background: var(--warning-light); color: var(--warning);  border: 1px solid var(--warning-border); }
  &--sent      { background: var(--success-light); color: var(--success);  border: 1px solid var(--success-border); }
  &--paused    { background: var(--gray-100);      color: var(--gray-500); border: 1px solid var(--gray-200); }
  &--failed    { background: var(--danger-light);  color: var(--danger);   border: 1px solid var(--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; }
}

// Recipient count badge - shared between the Campaign and Recurring Campaign
// "N contacts found based on your selection" indicator, so both features
// look identical regardless of which page hosts them.
.recipient-count-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: v.$primary-light;
  border: 1px solid v.$primary-border;
  border-radius: v.$radius-full;
  padding: 6px 16px;
  font-size: v.$font-size-sm;
  color: v.$primary;
  font-weight: 500;

  &.is-loading { opacity: 0.7; }
}

.recipient-count-badge-num {
  font-size: 18px;
  font-weight: 700;
  color: v.$primary;
}

// 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; }
}
