/* One colour drives line and wash. `flex-shrink: 0` because a squashed sparkline lies about its slope;
   `display: block` drops the inline baseline gap. */
@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;
  }

  /* Filling its box: the box is the parent's to size, never the drawing's, so the drawing lies over it. */
  .lotics-sparkline[data-fill] {
    position: relative;
    flex: 1 1 auto;
    align-self: stretch;
    min-width: 0;
    min-height: var(--lotics-sparkline-height);
  }

  .lotics-sparkline[data-fill] > .lotics-sparkline__chart {
    position: absolute;
    inset: 0;
  }

  .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;
  }

  /* The period still running: the line's own ink, broken, so it reads as unfinished rather than a fall. */
  .lotics-sparkline__running {
    fill: none;
    stroke: var(--lotics-sparkline-color);
    stroke-width: 1.5;
    stroke-dasharray: 2 3;
    stroke-linecap: round;
  }
}