/*
 * A trend's SHAPE, at row scale. One colour drives both the line and the wash
 * under it, so the two cannot be set apart; the caller's value overrides it on
 * the root and the default is a token.
 *
 * `flex-shrink: 0` because the box is the DATA's size: a squashed sparkline
 * redraws the same series over a shorter span and quietly lies about its slope.
 * `display: block` on the chart drops the inline baseline gap that would
 * otherwise make the box taller than the height the caller asked for.
 */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-sparkline {
    --lotics-sparkline-color: var(--lotics-ink-default);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-shrink: 0;
  }

  .lotics-sparkline__chart {
    display: block;
  }

  .lotics-sparkline__area {
    fill: var(--lotics-sparkline-color);
    fill-opacity: 0.1;
    stroke: none;
  }

  .lotics-sparkline__line {
    fill: none;
    stroke: var(--lotics-sparkline-color);
    stroke-width: 1.5;
    stroke-linejoin: round;
    stroke-linecap: round;
  }
}