/*
 * A line over its own value axis, or several on one shared scale. ONE colour
 * drives a series' stroke, its points and the wash under them, so the three cannot
 * come apart: the component declares it on the root (which the wash inside
 * `<defs>` reads) and again on each series group.
 *
 * CONTENT-SIZED, for the reason written out on `bar_chart.css`.
 */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  /* TWO COLUMNS, AND THE VALUE AXIS IS THE FIRST OF THEM. The axis, the plot and
     the x labels are three boxes that have to agree about one edge: a fixed axis
     column is overrun the moment a tick reads `80.000.000 ₫`, and a label track
     offset by its own arithmetic puts every x label off the point it names. */
  .lotics-line-chart {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-content: center;
    /* Rows carry the stack's gap; the column gap is the axis's own breathing
       room, tighter because the ticks already end in their own padding. */
    gap: var(--lotics-space-8) var(--lotics-space-4);
    padding-block: var(--lotics-space-8);
  }

  /* Nothing to put an axis beside. */
  .lotics-line-chart[data-empty] {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Above the plot, the same anatomy and spacing `StackedBarChart` gives its
     legend — two charts in one card must not annotate themselves two ways. */
  .lotics-line-chart__legend {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--lotics-space-16);
  }

  /* The axis and the plot are the grid's own two columns, borrowed — a row that
     sized itself would be the second opinion this anatomy just stopped having. */
  .lotics-line-chart__row {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    align-items: stretch;
  }

  /* The ticks spread across the plot's own height, top value first. The column is
     as wide as the widest of them — a figure that does not fit is not an axis. */
  .lotics-line-chart__axis {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    padding-block: var(--lotics-space-4);
    padding-inline-end: var(--lotics-space-4);
  }

  .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 a rung darker than the rules above it: it is the axis, and
     the others are only guides 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;
  }

  /* A point is a ring on the ground it sits on; the LATEST one fills, because
     the newest reading is the one a reader looks 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;
  }

  /* The x labels ride the plot's own track, inset by the SVG's own pads so a label
     centres on the point it names rather than on the box the point is drawn in.
     Both pads come from the component, which is the only thing that knows them. */
  .lotics-line-chart__labels {
    grid-column: 2;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    position: relative;
    height: 20px;
    margin-inline-start: var(--lotics-line-chart-pad-left);
    margin-inline-end: var(--lotics-line-chart-pad-right);
  }

  /* ONE LINE PER TICK. The labels are absolutely positioned inside a track of fixed
     height, so a wrap clips mid-glyph. */
  .lotics-line-chart__label {
    position: absolute;
    left: var(--lotics-line-chart-label);
    transform: translateX(-50%);
    white-space: nowrap;
  }

  /* THE END TICKS ARE ANCHORED INSIDE THE TRACK. The first point sits on the track's
     left edge and the last on its right, so half of a centred label there is asked
     to overhang the plot. */
  .lotics-line-chart__label[data-start] {
    transform: translateX(0);
  }

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