// Fallback size, used when no width/height props are given. Those props set an inline style,
// which wins over this.
img.sparklineImg {
  width: 100px;
  height: 25px;
}

// Moved here from coreHome.less so every `.sparklineImg` rule lives in one file. Scoped to the
// legacy `.sparkline` wrapper exactly as that rule was, so a sparkline outside one — as in
// SingleMetricView — is unchanged.
.sparkline .sparklineImg {
  vertical-align: middle;
  padding-right: 10px;
  margin-top: 0;
}

// For parents that size the image themselves: never let it grow past its container. Without this
// it would overflow rather than shrink, because Morpheus sets `flex-shrink: 0` on it.
.sparklineImg--fluid {
  max-width: 100%;
}

// Cards size their image to the slot, so the gap above would eat 10px of it.
.sparkline .sparklineImg--fluid {
  padding-right: 0;
}

// Hides the image while the parent shows its own placeholder, so a half-loaded image can't appear
// on top of it. Kept separate from `--loading` on purpose: the browser keeps showing the previous
// image until a new one arrives, so hiding every sparkline by default would make them blink.
.sparklineImg--hidden {
  visibility: hidden;
}

.sparklineEvolution {
  color: black;
  font-size: 12px;
  white-space: nowrap;
}

.sparklineEvolution-positive {
  color: green;
}

.sparklineEvolution-negative {
  color: red;
}

.sparklineEvolution_icon {
  margin-right: 1em;
  vertical-align: middle;
}