/*
 * Ordered stages as bars that NARROW. One set of roles serves both
 * orientations — a stage has a rate, a track, a fill and its text — and the
 * orientation decides only WHICH AXIS the fraction runs along and how the
 * stages are arranged. That is why `--lotics-funnel-fill` is a length rather
 * than a width or a height.
 *
 * `--lotics-funnel-size` is the plot height in `vertical` and a bar's thickness
 * in `horizontal`: one number from the caller, read by whichever rule the
 * orientation selects.
 */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-funnel {
    --lotics-funnel-color: var(--primary);
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

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

  .lotics-funnel[data-orientation="horizontal"] {
    gap: var(--lotics-space-12);
  }

  /* The three aligned rows of the vertical funnel: rates across the top, bars,
     then each column's figure and name. 10 — a rung and a quarter, wide enough
     that four columns read as four. */
  .lotics-funnel__rates,
  .lotics-funnel__bars,
  .lotics-funnel__captions {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: var(--lotics-space-10);
  }

  .lotics-funnel__bars {
    height: var(--lotics-funnel-size);
  }

  /* `min-width: 0` on every column, because a flex item floors at its own
     min-content: a rate wider than its squeezed column would WIDEN the row it is
     in, and the rates would stop lining up with the bars they annotate. The label
     overflows its column instead, centred, which is what it always did. */
  .lotics-funnel__rate-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    min-width: 0;
  }

  .lotics-funnel[data-orientation="vertical"] .lotics-funnel__stage,
  .lotics-funnel[data-orientation="vertical"] .lotics-funnel__press {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 1;
    min-width: 0;
    height: 100%;
  }

  /* A stage BLOCK: the text over its bar. Both boxes carry it so the layout is
     the same whether or not a press target sits between them. */
  .lotics-funnel[data-orientation="horizontal"] .lotics-funnel__stage,
  .lotics-funnel[data-orientation="horizontal"] .lotics-funnel__press {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--lotics-space-6);
  }

  /* The press target is a real button, so everything a UA would paint on one is
     stated here — it must read as the bar it wraps and nothing else. */
  .lotics-funnel__press {
    border: 0 solid var(--border);
    border-radius: 0;
    padding: 0;
    background-color: transparent;
    background-image: none;
    font-family: var(--font-sans);
    color: var(--lotics-ink-default);
    text-align: start;
    appearance: none;
    cursor: pointer;
    touch-action: manipulation;
    user-select: none;
  }

  .lotics-funnel__press:focus-visible {
    outline: var(--lotics-ring-width) solid var(--ring);
    outline-offset: 0;
  }

  .lotics-funnel__track {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-end;
    border-radius: calc(var(--lotics-radius-control) - var(--lotics-space-8));
    overflow: hidden;
    background-color: var(--muted);
  }

  .lotics-funnel[data-orientation="vertical"] .lotics-funnel__track {
    flex: 1;
    min-width: 0;
    width: 100%;
  }

  .lotics-funnel[data-orientation="horizontal"] .lotics-funnel__track {
    height: var(--lotics-funnel-size);
  }

  .lotics-funnel__fill {
    border-radius: calc(var(--lotics-radius-control) - var(--lotics-space-8));
    background-color: var(--lotics-funnel-color);
  }

  .lotics-funnel[data-orientation="vertical"] .lotics-funnel__fill {
    width: 100%;
    height: var(--lotics-funnel-fill);
  }

  .lotics-funnel[data-orientation="horizontal"] .lotics-funnel__fill {
    height: 100%;
    width: var(--lotics-funnel-fill);
  }

  /* The stages you did not drill into fade; the one you did stays solid. */
  .lotics-funnel__stage[data-dimmed] .lotics-funnel__fill {
    opacity: 0.28;
  }

  .lotics-funnel[data-orientation="vertical"] .lotics-funnel__caption {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    min-width: 0;
    gap: var(--lotics-space-2);
  }

  .lotics-funnel[data-orientation="horizontal"] .lotics-funnel__caption {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: var(--lotics-space-8);
  }

  /* The figure sits on the right edge, pushed by its own margin rather than by
     a spacer element. */
  .lotics-funnel[data-orientation="horizontal"] .lotics-funnel__value {
    margin-inline-start: auto;
  }
}