sx-production-trend-card {
  display: block;
}

.sx-production-trend-bars {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.sx-production-trend-row {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr) 56px;
  gap: 14px;
  align-items: center;
}

.sx-production-trend-row span,
.sx-production-trend-row strong {
  font-size: 13px;
}

.sx-production-trend-track {
  height: 13px;
  overflow: hidden;
  background: var(--color-panel-soft);
  border-radius: 999px;
}

.sx-production-trend-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary), var(--color-success));
  border-radius: inherit;
  transform-origin: left;
  animation: grow-bar 700ms ease both;
}

.sx-production-trend-disclaimer {
  margin: -12px 0 18px;
  color: var(--color-text-muted);
  font-size: 11px;
}