/*
 * ONE ROW of a reorder list: its leading affordance, its content, the controls
 * that move it.
 *
 * `drag` — the grip is NOT a tab stop: the up/down pair beside it is the
 * keyboard path, and a second stop naming the same row would announce it twice.
 * `touch-action: none` is what makes a touch drag move the row instead of
 * scrolling the page — the browser claims the gesture otherwise, and the row
 * never moves on a phone. The grip pulls left by one rung so the ROW's content
 * still starts on the container's edge: the controls are chrome, and chrome that
 * indents the text beside it makes every neighbour line up against an empty
 * gutter.
 *
 * `buttons` — the RAIL. A leading segment, the dot, then a segment that fills
 * whatever height the row takes, so the line arrives at the next row's leading
 * segment with nothing between them — which is why the list itself has NO gap
 * in this mode and a row pads its own bottom instead. The end segments are
 * transparent rather than absent: every row then keeps one geometry and the dots
 * stay on one x, however many rows there are. The dot sits on the CONTROL line,
 * not on the row's vertical centre — half a control band, less the dot's own
 * radius — so a row whose content wraps to two lines does not drag its marker
 * down with it.
 *
 * Every box in this sheet STATES its shrink: a position that gave way inside a
 * short column would pull its dot off the line the whole list is drawn on.
 */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  /* FILLS the slot the list reserved: a drag list states one row height up front
     and the row is what has to answer for it, or a 20px label leaves the bottom
     of every 44px slot empty. In a buttons list the slot IS the row, so the
     growth is a no-op. */
  .lotics-reorder-item {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    flex-shrink: 0;
    min-width: 0;
  }

  .lotics-reorder-item[data-reorder="drag"] {
    align-items: center;
    gap: var(--lotics-space-8);
  }

  .lotics-reorder-item[data-reorder="buttons"] {
    align-items: stretch;
    gap: var(--lotics-space-10);
  }

  /* ─── drag — the grip ──────────────────────────────────────────────────── */

  .lotics-reorder-item__grip {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--lotics-space-24);
    height: var(--lotics-space-32);
    margin-left: calc(var(--lotics-space-8) * -1);
    cursor: grab;
    touch-action: none;
  }

  .lotics-reorder-item__grip:active {
    cursor: grabbing;
  }

  /* ─── buttons — the rail ───────────────────────────────────────────────── */

  .lotics-reorder-item__rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: 12px;
  }

  .lotics-reorder-item__segment {
    flex-shrink: 0;
    width: 1px;
    background: var(--border);
  }

  .lotics-reorder-item__segment[data-position="lead"] {
    height: calc(var(--lotics-control-height) / 2 - var(--lotics-space-4));
  }

  /* Fills the rest of the row, INCLUDING its bottom padding, so the line
     reaches the next row's leading segment. */
  .lotics-reorder-item__segment[data-position="fill"] {
    flex: 1;
    min-width: 0;
  }

  .lotics-reorder-item__segment[data-hidden] {
    background: transparent;
  }

  .lotics-reorder-item__dot {
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    border-radius: var(--lotics-radius-full);
    background: var(--lotics-tone-zinc-solid);
  }

  /* ─── the body ─────────────────────────────────────────────────────────── */

  .lotics-reorder-item__body {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: 1;
    min-width: 0;
    column-gap: var(--lotics-space-8);
  }

  /* The row's own spacing — a gap on the list would break the rail. */
  .lotics-reorder-item__body[data-reorder="buttons"] {
    flex-wrap: wrap;
    row-gap: var(--lotics-space-4);
    padding-bottom: var(--lotics-space-6);
  }

  .lotics-reorder-item__position {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex-shrink: 0;
    width: var(--lotics-reorder-item-position-width);
  }

  /* A COLUMN with stretched children, so the row the caller hands it fills the
     width it was given — a `row` here sizes a single child to that child's own
     content, and a register row came out as wide as its longest label. */
  .lotics-reorder-item__content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex-grow: 1;
    min-width: 0;
  }

  /* GROWS but never gives way: the 200px basis is a position's editing room, and
     a shrink would hand it to the position column instead — an editor a caller
     sized at 200 came back 150 wide the moment this was CSS's default 1. The
     editors of one position sit on a ROW, which is what the direction swap is
     for. */
  .lotics-reorder-item__content[data-reorder="buttons"] {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    flex-shrink: 0;
    flex-basis: 200px;
    column-gap: var(--lotics-space-8);
    row-gap: var(--lotics-space-4);
  }

  .lotics-reorder-item__controls {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-shrink: 0;
    gap: var(--lotics-space-2);
  }
}