/*!
 * Matomo - free/libre analytics platform
 *
 * @link    https://matomo.org
 * @license https://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
 */
// Shared card frame. Defined as a mixin (the parens keep it out of the compiled CSS) so every
// sparkline card block can apply the frame to its own root instead of borrowing another component's
// block class. Reused by SegmentComparisonCard.less: all sparkline `.less` compile in a single pass
// (StylesheetUIAssetMerger), and this file is registered before it, so the mixin is in scope there.
.sparklineCardFrame() {
  box-sizing: border-box;
  padding: 16px;
  background: @theme-color-widget-background;
  border: 1px solid @theme-color-border-alternative;
  border-radius: 8px;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;

  // Query container for the metric readout: MetricValue's number + heights scale with this width via
  // cqi units. Standalone readouts have no nearer container, so they size to the card; comparison
  // columns set their own container and override it. inline-size contains only the inline axis, so
  // the card's height still grows with its content.
  // The sparkline relies on this too: the card's width ignores its contents, so the image can't
  // widen the slot it was measured from (see useSparklineSlotSize.ts).
  container-type: inline-size;
}

// Clickable-card treatment, shared by SparklineCard and SegmentComparisonCard. A mixin (parens keep
// it out of compiled CSS) applied to `.sparkline.<block>`, so `&.linked` / `&:hover` resolve against
// the caller. Overrides two legacy Morpheus `div.sparkline` rules (main.less): `display: flex` →
// block (a flex item's min-width:auto would let a long nowrap title overflow instead of truncate),
// and the dashed grey `.linked:hover` bottom-border → a solid focus-ring border on all sides. Kept
// component-side (not excluded at the Morpheus source) because the hover must react to the runtime
// `.linked` class; theme tokens keep the colours right in light/dark.
.sparklineCardClickable() {
  display: block;

  // Clickable cards (initializeSparklines adds .linked): pointer cursor + hover border so they
  // read as interactive.
  &.linked {
    cursor: pointer;
    border-bottom-color: @theme-color-border-alternative;

    &:hover,
    &:focus {
      border-color: @theme-color-focus-ring-alternative;
      border-bottom: 1px solid @theme-color-focus-ring-alternative;
    }
  }
}

// The card carries the legacy `.sparkline` class because initializeSparklines (CoreHome sparkline.js)
// wires the click-to-evolution link by that selector — it's a JS contract, not decoration. Downside:
// global `.sparkline` rules (Morpheus/CoreHome, and Dashboard's `.widget .widgetContent .sparkline`)
// would override the frame's padding/margins. So we qualify each frame selector with `.sparkline` to
// out-specify them; without it the cards lose their padding when rendered as a widget.
.widget .widgetContent .sparkline.sparklineCard,
.sparkline.sparklineCard {
  .sparklineCardFrame();
}

// Clickable-card treatment (same `.sparkline.sparklineCard` compound as the frame above).
.sparkline.sparklineCard {
  .sparklineCardClickable();
}

// The sparkline slot, rendered after either card body. Its height is the only place the displayed
// sparkline height is set: SparklineCard.vue measures this slot and Sparkline draws the image at
// exactly that size, so the number is never duplicated. Centering stops flex stretching the image,
// and `safe` keeps it reachable if it ever overflows.
.sparklineCard__sparkline {
  height: 40px;
  display: flex;
  align-items: safe center;
}