/*!
 * Matomo - free/libre analytics platform
 *
 * @link    https://matomo.org
 * @license https://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
 */

// One compared segment: chip + value + its own sparkline. The row is presentational — the whole
// card is the single `.sparkline` click-to-evolution link (SegmentComparisonCard), so the row
// carries no legacy `.sparkline` class and needs none of its layout overrides. Inter-row spacing is
// owned by the card (SegmentComparisonCard.less `.sparklineSegmentComparisonCard__rows` gap).

// Neutral pill around the compared segment's name, above the value readout. Hugs its text and
// clamps a long name to one line so it can't grow the card (full name on hover). No colour
// indicator — the sparkline PNG's own series colour carries the segment↔line link.
.sparklineSegmentComparisonRow__chip {
  display: inline-block;
  max-width: 100%;
  box-sizing: border-box;
  margin-bottom: 8px;
  padding: 2px 8px;
  border: 1px solid @theme-color-border-alternative;
  border-radius: 6px;
  color: @theme-color-text;
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
}

// The date columns come from the shared PeriodColumns component (PeriodColumns.less). It is
// margin-free; the gap before the sparkline is owned by `__sparkline`'s margin-top below, so
// segment-only spacing is unchanged.

// Sparkline slot for one segment. Same height and measured sizing as the plain card slot:
// SegmentComparisonRow.vue measures this slot and Sparkline draws the image at exactly that size.
.sparklineSegmentComparisonRow__sparkline {
  height: 40px;
  margin-top: 4px;
  display: flex;
  align-items: safe center;
}