@use 'sass:map';

// ── Shared pill base ─────────────────────────────────────────────────────
%pill-base {
  display: inline-block;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
}

// ── Verdict pill ─────────────────────────────────────────────────────────
// Unified: replaces both .verdict-pill (screener) and .vpill (safe-buys)

$verdict-variants: (
  'green':  (color: var(--green),      bg: var(--green-bg)),
  'yellow': (color: var(--yellow),     bg: var(--yellow-bg)),
  'red':    (color: var(--red),        bg: var(--red-bg)),
  'blue':   (color: #60a5fa,           bg: #1e3a5f33),
  'gray':   (color: var(--text-muted), bg: #1e293b),
);

.verdict-pill {
  @extend %pill-base;
  font-size: var(--fs-sm);
  letter-spacing: 0.02em;
  // Ensure all pills have a consistent look — fallback to gray
  background: #1e293b;
  color: var(--text-muted);

  @each $name, $vals in $verdict-variants {
    &.#{$name} {
      background: map.get($vals, 'bg');
      color: map.get($vals, 'color');
    }
  }
}

// ── Sentiment pill (LLM sidebar — BULLISH / BEARISH / NEUTRAL) ───────────

$sentiment-variants: (
  BULLISH: (color: var(--green),      bg: var(--green-bg)),
  BEARISH: (color: var(--red),        bg: var(--red-bg)),
  NEUTRAL: (color: var(--text-muted), bg: var(--bg-card)),
);

.sentiment-pill {
  @extend %pill-base;
  font-size: var(--fs-xs);

  @each $sentiment, $vals in $sentiment-variants {
    &[data-sentiment='#{$sentiment}'] {
      background: map.get($vals, 'bg');
      color: map.get($vals, 'color');
    }
  }
}

// ── Text colour helpers ───────────────────────────────────────────────────

$text-colors: (
  'green':  var(--green),
  'yellow': var(--yellow),
  'red':    var(--red),
  'orange': var(--orange),
);

@each $name, $color in $text-colors {
  .text-#{$name} { color: $color; font-weight: 600; }
}

.text-gray { color: var(--text-dim); }