/*
 * The bar chart, in two orientations over one set of roles: a slot holds a track,
 * the track holds the bar, and the annotation row under the plot carries either
 * the categories (vertical) or the value axis (horizontal).
 *
 * CONTENT-SIZED; the HOST decides whether a chart stretches. `flex: 1` resolves to
 * a zero basis on a vertical stack's main axis — a card body is one — so the chart
 * paints its fixed-height content outside the card.
 *
 * Every measure is DATA and arrives as a property, so a consumer can restyle the
 * bar without `!important` and a theme can repaint it.
 */
@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);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
  }

  .lotics-bar-chart[data-orientation="vertical"] {
    gap: var(--lotics-space-8);
  }

  /* ── the plot ─────────────────────────────────────────────────────────── */

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

  .lotics-bar-chart[data-orientation="vertical"] .lotics-bar-chart__bars {
    flex-direction: row;
    height: var(--lotics-bar-chart-height);
  }

  .lotics-bar-chart[data-orientation="horizontal"] .lotics-bar-chart__bars {
    flex-direction: column;
  }

  .lotics-bar-chart__slot {
    display: flex;
    align-items: center;
  }

  /* A bar column NEVER widens to its content: the slots are the ruler the
     labels beneath them are measured against. */
  .lotics-bar-chart[data-orientation="vertical"] .lotics-bar-chart__slot {
    flex-direction: column;
    justify-content: flex-end;
    flex: 1;
    min-width: 0;
  }

  .lotics-bar-chart[data-orientation="horizontal"] .lotics-bar-chart__slot {
    flex-direction: row;
    gap: var(--lotics-space-8);
  }

  .lotics-bar-chart__track {
    display: flex;
  }

  .lotics-bar-chart[data-orientation="vertical"] .lotics-bar-chart__track {
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    flex: 1;
    min-width: 0;
    width: 100%;
  }

  .lotics-bar-chart[data-orientation="horizontal"] .lotics-bar-chart__track {
    flex-direction: row;
    align-items: stretch;
    flex: 1;
    min-width: 0;
  }

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

  .lotics-bar-chart[data-orientation="vertical"] .lotics-bar-chart__bar {
    width: 100%;
    height: var(--lotics-bar-chart-length);
    min-height: 2px;
  }

  .lotics-bar-chart[data-orientation="horizontal"] .lotics-bar-chart__bar {
    height: 24px;
    width: var(--lotics-bar-chart-length);
    min-width: 2px;
  }

  /* ── the value axis ───────────────────────────────────────────────────── */

  .lotics-bar-chart__axis {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: relative;
  }

  .lotics-bar-chart[data-orientation="vertical"] .lotics-bar-chart__axis {
    flex-shrink: 0;
    width: var(--lotics-bar-chart-axis-width);
  }

  .lotics-bar-chart[data-orientation="horizontal"] .lotics-bar-chart__axis {
    flex: 1;
    min-width: 0;
    height: 24px;
  }

  .lotics-bar-chart__tick {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* The label sits ON its gridline, so the box lifts by half a line. */
  .lotics-bar-chart[data-orientation="vertical"] .lotics-bar-chart__tick {
    left: 0;
    top: var(--lotics-bar-chart-tick);
    transform: translateY(-8px);
  }

  /*
   * `max-content` + a half-width shift, so the label sizes to its own text and
   * then centres on its tick at ANY label length.
   *
   * Both halves are load-bearing. An absolutely-positioned box with only `left`
   * set is sized by the space remaining to the container's RIGHT EDGE, so the tick
   * at 100% shrink-wraps and breaks its text across two lines; and a fixed pixel
   * nudge assumes one label width, so every tick is off by however far its own
   * label differs from the guess.
   */
  .lotics-bar-chart[data-orientation="horizontal"] .lotics-bar-chart__tick {
    left: var(--lotics-bar-chart-tick);
    transform: translateX(-50%);
    width: max-content;
  }

  /* The tick's own hairline, drawn rather than rendered: it joins the label to
     the track and is not a quantity of its own. */
  .lotics-bar-chart[data-orientation="horizontal"] .lotics-bar-chart__tick::before {
    content: "";
    width: 1px;
    height: 4px;
    background-color: var(--border);
  }

  /* ── the annotation row under the plot ────────────────────────────────── */

  /*
   * THE ROW BOUNDS THE SPILL. A thinned label's box is deliberately wider than its
   * slot, and at the two ENDS there are no blank slots to spill into, so the first
   * and last boxes painted up to 20px outside the chart. Clipping at the row costs
   * nothing the reader sees: the box is ROOM, and the axis thins until the text
   * fits.
   */
  .lotics-bar-chart__labels {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: var(--lotics-space-8);
    overflow: hidden;
  }

  .lotics-bar-chart[data-orientation="horizontal"] .lotics-bar-chart__labels {
    margin-block-start: var(--lotics-space-4);
  }

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

  .lotics-bar-chart__label-box {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* Wider than its slot when the axis thinned, and centred on the bar by the slot's
     own `align-items` — a flex item wider than its cross-axis space overflows both
     edges equally. `auto` is what a slot-wide box measures, so the fallback is the
     unthinned case. */
  .lotics-bar-chart[data-orientation="vertical"] .lotics-bar-chart__label-box {
    flex-direction: column;
    gap: var(--lotics-space-2);
    width: var(--lotics-bar-chart-label-box, auto);
  }

  /* The width is the instance's `labelWidth`; what lives here is the row shape —
     the entity's mark, then its name, on one line. */
  .lotics-bar-chart[data-orientation="horizontal"] .lotics-bar-chart__label-box {
    flex-direction: row;
    flex-shrink: 0;
    gap: var(--lotics-space-6);
    width: var(--lotics-bar-chart-label-width);
  }

  /* One fixed column, so neither a long bar nor a long figure can clip the
     other. */
  .lotics-bar-chart[data-orientation="horizontal"] .lotics-bar-chart__value {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
    width: var(--lotics-bar-chart-value-width);
  }
}