/*
 * A line over its own value axis, or several on one shared scale. One colour drives a series'
 * stroke, points and wash, declared on the root (for the wash in `<defs>`) and on each series.
 * Content-sized, as `bar_chart.css` explains.
 */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  /*
   * The axis is the grid's first column, so axis, plot and labels share one edge: a fixed axis is
   * overrun by `80.000.000 ₫`, and an offset label track misplaces every label. No air of its own above or
   * below: the plot reserves half a tick's line over its top rule and under its baseline, so the chart is
   * as tall as its caller says and every tick stands inside it.
   */
  .lotics-line-chart {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-content: center;
    /* Tighter than a gap, since ticks end in their own padding. */
    column-gap: var(--lotics-space-4);
  }

  .lotics-line-chart[data-empty] {
    grid-template-columns: minmax(0, 1fr);
  }

  /* `StackedBarChart`'s legend anatomy, so two charts in one card annotate alike. */
  .lotics-line-chart__legend {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--lotics-space-16);
    margin-block-end: var(--lotics-space-8);
  }

  /* Borrows the grid's two columns rather than sizing itself. */
  .lotics-line-chart__row {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    align-items: stretch;
  }

  /* As wide as the widest tick: every tick in one cell, each moved down to its rule (`--lotics-line-chart-tick`),
     since spread evenly down the plot's box a tick stood off its rule and the top one rose over the chart's edge. */
  .lotics-line-chart__axis {
    display: grid;
    justify-items: end;
    padding-inline-end: var(--lotics-space-4);
  }

  .lotics-line-chart__tick {
    grid-area: 1 / 1;
    align-self: start;
    transform: translateY(var(--lotics-line-chart-tick));
    white-space: nowrap;
  }

  .lotics-line-chart__plot {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 1;
    min-width: 0;
    height: var(--lotics-line-chart-height);
  }

  .lotics-line-chart__chart {
    display: block;
  }

  .lotics-line-chart__grid {
    stroke: var(--lotics-wash-selected);
    stroke-width: 1;
  }

  /* The baseline is the axis; the others only guide back to it. */
  .lotics-line-chart__grid[data-baseline] {
    stroke: var(--border);
  }

  .lotics-line-chart__wash {
    stop-color: var(--lotics-line-chart-color);
  }

  .lotics-line-chart__wash[data-stop="top"] {
    stop-opacity: 0.16;
  }

  .lotics-line-chart__wash[data-stop="bottom"] {
    stop-opacity: 0.01;
  }

  .lotics-line-chart__area {
    stroke: none;
  }

  .lotics-line-chart__line {
    fill: none;
    stroke: var(--lotics-line-chart-color);
    stroke-width: 2.5;
    stroke-linejoin: round;
    stroke-linecap: round;
  }

  /* The latest reading fills, since readers look it up. */
  .lotics-line-chart__point {
    r: 3;
    fill: var(--card);
    stroke: var(--lotics-line-chart-color);
    stroke-width: 1.5;
  }

  .lotics-line-chart__point[data-latest] {
    r: 4.5;
    fill: var(--lotics-line-chart-color);
    stroke: var(--card);
    stroke-width: 2;
  }

  /* Inset by the SVG's pads so labels centre on their points; the component supplies both. */
  .lotics-line-chart__labels {
    grid-column: 2;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    position: relative;
    height: var(--lotics-leading-xs);
    margin-inline-start: var(--lotics-line-chart-pad-left);
    margin-inline-end: var(--lotics-line-chart-pad-right);
  }

  /* Fixed-height track, so a wrap would clip mid-glyph. */
  .lotics-line-chart__label {
    position: absolute;
    left: var(--lotics-line-chart-label);
    transform: translateX(-50%);
    white-space: nowrap;
  }

  /* End labels sit on the track's edges, so centring would overhang the plot. */
  .lotics-line-chart__label[data-start] {
    transform: translateX(0);
  }

  .lotics-line-chart__label[data-end] {
    transform: translateX(-100%);
  }
}