/* =============================================================================
   Tag — styles
   ─────────────────────────────────────────────────────────────────────────────
   Types:  neutral | buy | sell | success | error | alert | brand
   Sizes:  sm (h 20px, 10px Medium) | lg (h 28px, 12px SemiBold, opacity 80%)
   Pill:   true  → pill container (border + bg + padding)
           false → no container at all (naked icon + text, 4px gap)
   ========================================================================== */

.tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  box-sizing: border-box;
  white-space: nowrap;
  font-family: var(--font-body);
  user-select: none;
}

/* ─── Sizes ───────────────────────────────────────────────────────────────── */
.tag--sm {
  height: 20px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1px;
  line-height: 16px;
}

.tag--lg {
  height: 28px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12px;
  opacity: 0.8;
}

/* ─── Pill shape (has visible container) ─────────────────────────────────── */
.tag--pill {
  border-radius: 99px;
}

.tag--sm.tag--pill {
  padding: 0 12px;
}

.tag--lg.tag--pill {
  padding: 0 16px;
}

/* ─── No-pill (naked text — no bg, no border, no padding) ────────────────── */
.tag--no-pill {
  border-color: transparent;
  background: transparent;
  padding: 0;
  border-radius: 99px; /* has no visible effect; matches Figma base shape */
}

/* ─── Icon layout ─────────────────────────────────────────────────────────── */
/* Pill + icon: 8px gap */
.tag--pill.tag--with-icon {
  gap: 8px;
}

/* No-pill + icon: 4px gap */
.tag--no-pill.tag--with-icon {
  gap: 4px;
}

.tag__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.tag__label {
  flex-shrink: 0;
}

/* ─── Type variants (pill only — these have no effect on no-pill) ─────────── */

/* neutral */
.tag--neutral.tag--pill {
  background: var(--surface-raised-1);
  border-color: var(--border-neutrals-secondary);
  color: var(--text-secondary);
}
.tag--neutral.tag--no-pill {
  color: var(--text-secondary);
}

/* buy */
.tag--buy.tag--pill {
  background: var(--fill-buy-transparent);
  border-color: var(--fill-buy-transparent);   /* border = same as bg */
  color: var(--text-buy);
}
.tag--buy.tag--no-pill {
  color: var(--text-buy);
}

/* sell */
.tag--sell.tag--pill {
  background: var(--fill-sell-transparent);
  border-color: var(--border-error-transparent-primary);
  color: var(--text-sell);
}
.tag--sell.tag--no-pill {
  color: var(--text-sell);
}

/* success */
.tag--success.tag--pill {
  background: var(--fill-success-transparent);
  border-color: var(--fill-success-mid);
  color: var(--text-success);
}
.tag--success.tag--no-pill {
  color: var(--text-success);
}

/* error */
.tag--error.tag--pill {
  background: var(--fill-error-warning-transparent);
  border-color: var(--border-error-transparent-primary);
  color: var(--text-danger);
}
.tag--error.tag--no-pill {
  color: var(--text-danger);
}

/* alert */
.tag--alert.tag--pill {
  background: var(--fill-alert-transparent);
  border-color: var(--border-alert-subtle);
  color: var(--text-alert);
}
.tag--alert.tag--no-pill {
  color: var(--text-alert);
}

/* brand */
.tag--brand.tag--pill {
  background: var(--fill-brand-transparent-mid);
  border-color: var(--border-brand-transparent-primary);
  color: var(--text-brand);
}
.tag--brand.tag--no-pill {
  color: var(--text-brand);
}