/*
 * DD-13 Trend delta — app/components/ui/trend_delta_component.rb
 *
 * Inline 12px arrow + value at text-xs weight 500. Text always wears an
 * ink token, never the raw semantic base colour (that's reserved for
 * fills/marks per the dataviz method). Token vars only — enforced by
 * test/lint/css_token_lint_test.rb.
 */

.ui-trend-delta {
  display: inline-flex;
  align-items: center;
}

.ui-trend-delta__visible {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: var(--text-xs--line-height);
}

.ui-trend-delta__icon svg {
  display: block;
}

.ui-trend-delta--up {
  color: var(--color-success-ink);
}

.ui-trend-delta--down {
  color: var(--color-danger-ink);
}

.ui-trend-delta--neutral {
  color: var(--color-violet-ink);
}