/*
 * One whole, then its slices ranked beneath it. A drillable row is a real
 * button, so everything a UA would paint on one is stated here; the wash BLEEDS
 * outward — equal negative margin and padding, net zero for layout — so the
 * swatches line up with whatever sits above the bar.
 *
 * The DIMMED swatch is `opacity`, not a second colour: over an opaque ground it
 * composites to exactly what an alpha of the same value would, and it works on
 * a colour the caller passed as a token reference.
 */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-breakdown {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--lotics-space-12);
    /* Its OWN size container: the one width-driven decision below asks how wide
       the breakdown is, never how wide the page is — several of them sit side by
       side as facets, and a viewport query would answer for all of them at once. */
    container: lotics-breakdown / inline-size;
  }

  .lotics-breakdown__rows,
  .lotics-breakdown__panel {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  /*
   * THE ROW IS A GRID, and narrow is its DEFAULT: the label takes the first
   * line and the figure and its share sit under it.
   *
   * It was a flex line of four children where only the LABEL said what it does
   * under pressure (`min-width: 0` — "I may give way"), so the label absorbed
   * the whole deficit and rendered at nothing while the money kept its
   * min-content: the row stated a figure with no word saying what it counts.
   * A flex line cannot be broken before the figures either — a wrap happens
   * before the item whose own basis fills the line, and that item is the label.
   */
  .lotics-breakdown__row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "swatch label label"
      ".      value share";
    align-items: center;
    column-gap: var(--lotics-space-8);
    row-gap: var(--lotics-space-2);
    min-height: 36px;
    border: 0 solid var(--border);
    border-radius: calc(var(--lotics-radius-control) - var(--lotics-space-2));
    padding-inline: var(--lotics-row-wash-bleed);
    margin-inline: calc(var(--lotics-row-wash-bleed) * -1);
    background-color: transparent;
    background-image: none;
    font-family: var(--font-sans);
    color: var(--lotics-ink-default);
    text-align: start;
    appearance: none;
    /* The ARROW: the row is a filter wrapped around data, not a trip. */
    cursor: auto;
    touch-action: manipulation;
    user-select: none;
    transition: background-color var(--lotics-duration-fast) var(--lotics-ease-standard);
  }

  /* `PressableRow`'s ladder: hover is transient and one rung LIGHTER than the
     selection it must not imitate — the row you drilled into keeps its own
     ground while the pointer crosses it, which is the only thing on screen
     saying which filter you are inside. Hover EXCLUDES the drilled row rather
     than losing to it on order. */
  button.lotics-breakdown__row:not([data-pressed]):hover {
    background-color: var(--lotics-wash-hover);
  }

  .lotics-breakdown__row[data-pressed] {
    background-color: var(--lotics-wash-selected);
  }

  button.lotics-breakdown__row:active:not([data-pressed]) {
    background-color: var(--lotics-wash-press);
  }

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

  /*
   * BELOW THIS THE ROW CANNOT SEAT A LABEL, A FIGURE AND A SHARE AT ONCE.
   *
   * Derived, not chosen: the swatch and three gaps spend 32, a money string runs
   * ~100 and the share five characters, so under 320 the label is left below `FLEX_MIN_WIDTH`
   * — the width the kit says a flexible column stops being readable at.
   */
  @container lotics-breakdown (width >= 320px) {
    .lotics-breakdown__row {
      grid-template-columns: auto 1fr auto auto;
      grid-template-areas: "swatch label value share";
    }
  }

  .lotics-breakdown__swatch {
    grid-area: swatch;
    width: 8px;
    height: 8px;
    border-radius: var(--lotics-radius-full);
    background-color: var(--lotics-breakdown-swatch);
  }

  .lotics-breakdown__row[data-dimmed] .lotics-breakdown__swatch {
    opacity: 0.3;
  }

  .lotics-breakdown__label {
    grid-area: label;
    min-width: 0;
  }

  /* The figure never gives way — a money string cut in half is a wrong number —
     so it is the narrow row's second line rather than the label's squeeze. */
  .lotics-breakdown__value {
    grid-area: value;
    min-width: 0;
  }

  /* CONSTANT, so every share down the list ends on one x — each row is its own
     grid, so an `auto` track would size to its own digits and the column would
     read ragged. Five characters at the row's rung, because the widest share a
     breakdown can state is its own maximum, "100%", and at 30px that one wrapped
     to a second line on the row that matters most. */
  .lotics-breakdown__share {
    grid-area: share;
    width: 5ch;
  }

  .lotics-breakdown__toggle {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--lotics-space-4);
    min-height: 32px;
    border: 0 solid var(--border);
    border-radius: calc(var(--lotics-radius-control) - var(--lotics-space-2));
    padding-inline: var(--lotics-row-wash-bleed);
    margin-inline: calc(var(--lotics-row-wash-bleed) * -1);
    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;
    transition: background-color var(--lotics-duration-fast) var(--lotics-ease-standard);
  }

  .lotics-breakdown__toggle:hover {
    background-color: var(--lotics-wash-selected);
  }

  .lotics-breakdown__toggle:active {
    background-color: var(--lotics-wash-press);
  }

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