/*
 * The bar chart, in two orientations over one set of roles: a slot holds a track, the track holds the
 * bar from the zero line. A vertical slot is a column spanning the plot and the row under it, where its
 * name and figure stand; a horizontal slot seats its name, its bar and its figure on one line, or its name
 * over the other two (`stacked`). Either way a slot is its datum's one press.
 * Content-sized: `flex: 1` resolves to a zero basis in a card body and paints the chart outside it.
 * Every measure arrives as a property.
 */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-bar-chart {
    --lotics-bar-chart-color: var(--lotics-tone-blue-solid);
    /* The widest a column stands, whatever room its slot has. */
    --lotics-bar-chart-column: 56px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    min-width: 0;
  }

  /* Two rows — the plot, then the names — and a column per bar, the plot never past its box's height: in a
     body of a fixed height (a register's band) the columns give way — the chart may shrink below its content
     — and the names and figures under them stand whole. */
  .lotics-bar-chart[data-orientation="vertical"]:not([data-empty]) {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--lotics-bar-chart-count), minmax(0, 1fr));
    grid-template-rows: minmax(0, var(--lotics-bar-chart-height)) auto;
    gap: var(--lotics-space-8);
    min-height: 0;
  }

  .lotics-bar-chart__bars {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--lotics-space-8);
    min-width: 0;
  }

  /* The one rule of a chart whose bars print their figures: the line the columns stand on or hang from,
     across the plot's row — both lines named, since an absolute box's `auto` line is the chart's edge. */
  .lotics-bar-chart__zero {
    position: absolute;
    grid-row: 1 / 2;
    grid-column: 1 / -1;
    inset-inline: 0;
    bottom: var(--lotics-bar-chart-zero);
    height: 1px;
    background-color: var(--border);
    pointer-events: none;
  }

  /* A column spans the plot and the names, its bar over its name and figure on the chart's two rows. The
     columns are the ruler the labels are measured against. */
  .lotics-bar-chart[data-orientation="vertical"] .lotics-bar-chart__slot {
    display: grid;
    grid-row: 1 / span 2;
    grid-template-rows: subgrid;
    min-width: 0;
  }

  /* Name, bar, figure on one line: the name at its ink, the figure at the widest figure's, the bar the rest. */
  .lotics-bar-chart[data-orientation="horizontal"] .lotics-bar-chart__slot {
    display: grid;
    grid-template-columns: var(--lotics-bar-chart-label-width) minmax(0, 1fr) var(--lotics-bar-chart-value-width);
    grid-template-areas: "label track value";
    align-items: center;
    column-gap: var(--lotics-space-8);
    min-width: 0;
  }

  /* A name the row cannot seat beside a bar takes its own line over it, whole. */
  .lotics-bar-chart[data-stacked] .lotics-bar-chart__slot {
    grid-template-columns: minmax(0, 1fr) var(--lotics-bar-chart-value-width);
    grid-template-areas:
      "label label"
      "track value";
    row-gap: var(--lotics-space-2);
  }

  .lotics-bar-chart__track {
    position: relative;
    min-width: 0;
  }

  .lotics-bar-chart[data-orientation="vertical"] .lotics-bar-chart__track {
    min-height: 0;
  }

  .lotics-bar-chart[data-orientation="horizontal"] .lotics-bar-chart__track {
    grid-area: track;
    height: 24px;
  }

  .lotics-bar-chart__bar {
    position: absolute;
    border-radius: calc(var(--lotics-radius-control) - var(--lotics-space-8));
    background-color: var(--lotics-bar-chart-color);
  }

  /* From the zero line up (or down, negative); a figure too small to see keeps two pixels. A column is a
     bar, never a slab: it keeps a bar's width, centred in its slot, however few periods share the row. */
  .lotics-bar-chart[data-orientation="vertical"] .lotics-bar-chart__bar {
    inset-inline: 0;
    margin-inline: auto;
    width: min(100%, var(--lotics-bar-chart-column));
    bottom: var(--lotics-bar-chart-start);
    height: var(--lotics-bar-chart-length);
    min-height: 2px;
  }

  .lotics-bar-chart[data-orientation="horizontal"] .lotics-bar-chart__bar {
    top: 0;
    bottom: 0;
    left: var(--lotics-bar-chart-start);
    width: var(--lotics-bar-chart-length);
    min-width: 2px;
  }

  .lotics-bar-chart__label-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    min-width: 0;
    gap: var(--lotics-space-2);
  }

  /* The first and last lean inward: a label wider than its slot — widened over the blank slots beside it, or
     its own words — spills into the chart, never past its edge. */
  .lotics-bar-chart__label-slot[data-start] {
    align-items: flex-start;
  }

  .lotics-bar-chart__label-slot[data-end] {
    align-items: flex-end;
  }

  .lotics-bar-chart__label-slot[data-start] > .lotics-bar-chart__label-box {
    align-items: flex-start;
  }

  .lotics-bar-chart__label-slot[data-end] > .lotics-bar-chart__label-box {
    align-items: flex-end;
  }

  .lotics-bar-chart__label-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    min-width: 0;
  }

  /* A flex item wider than its cross axis overflows both edges equally, so it stays centred. Positioned, so a
     name widened over the blank columns beside it paints, and takes the pointer, over theirs. */
  .lotics-bar-chart[data-orientation="vertical"] .lotics-bar-chart__label-box {
    position: relative;
    flex-direction: column;
    gap: var(--lotics-space-2);
    width: var(--lotics-bar-chart-label-box, auto);
  }

  .lotics-bar-chart[data-orientation="horizontal"] .lotics-bar-chart__label-box {
    grid-area: label;
    flex-direction: row;
    gap: var(--lotics-space-6);
  }

  /* Beside a leading mark the name is what gives way, never the mark. */
  .lotics-bar-chart[data-orientation="horizontal"] .lotics-bar-chart__label {
    flex: 1 1 auto;
    min-width: 0;
  }

  .lotics-bar-chart[data-orientation="horizontal"] .lotics-bar-chart__value {
    grid-area: value;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 0;
  }

  /* A pressable row's wash bleeds past its words, as a register row's does, and over half the gap above and
     below it, so the rows' presses meet with no dead line between them. */
  .lotics-bar-chart[data-orientation="horizontal"] .lotics-bar-chart__slot[data-pressable] {
    padding: var(--lotics-space-4) var(--lotics-row-wash-bleed);
    margin: calc(var(--lotics-space-4) * -1) calc(var(--lotics-row-wash-bleed) * -1);
  }

  /* Its own colour, outlined over a hatch: the period is real and unfinished, neither a fall nor a gap, and
     never read as a pale highlight. */
  .lotics-bar-chart__bar[data-partial] {
    border: 1.5px solid var(--lotics-bar-chart-color);
    background-color: transparent;
    background-image: repeating-linear-gradient(
      -45deg,
      color-mix(in srgb, var(--lotics-bar-chart-color) 40%, transparent) 0 3px,
      transparent 3px 7px
    );
  }

  /* Everything else is no category, so it wears no series colour. */
  .lotics-bar-chart__bar[data-rest] {
    background-color: var(--lotics-tone-zinc-solid);
  }

  /* In a register's readings band, whose line is one low height: a bar's row is a tight line of text high (its
     name and figure are set tight), so the bars a band seats (`top`) stand whole in it, and each row stands centred
     in its share of the body (`--lotics-bar-chart-pitch`), so they spread over it rather than pack under the card's
     title. A track a control's words high stood a row 28 high, and four overran the band's body. */
  @container lotics-reading-band (width >= 0px) {
    .lotics-bar-chart[data-orientation="horizontal"] .lotics-bar-chart__bars {
      gap: 0;
    }

    .lotics-bar-chart[data-orientation="horizontal"] .lotics-bar-chart__slot {
      min-height: var(--lotics-bar-chart-pitch);
      align-content: center;
    }

    .lotics-bar-chart[data-orientation="horizontal"] .lotics-bar-chart__track {
      height: var(--lotics-leading-tight-sm);
    }

    /* A row's share is its press, so the rows' presses meet. */
    .lotics-bar-chart[data-orientation="horizontal"] .lotics-bar-chart__slot[data-pressable] {
      padding-block: 0;
      margin-block: 0;
    }
  }
}