/* ONE ROW of a reorder list: affordance, content, move controls. `drag`: the grip is not a tab stop (the
   up/down pair is the keyboard path); `touch-action: none` lets a touch drag move the row instead of
   scrolling; the grip pulls left a rung so content starts on the container edge. `buttons`: the rail —
   leading segment, dot, and a filling segment meeting the next row, so the list has no gap and rows pad
   their own bottom; transparent end segments keep one geometry. The dot sits on the control line, so
   wrapping content does not drag it. Every box states its shrink, or a squeezed position pulls its dot off
   the line. */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  /* A drag list states one row height, so the row fills its slot; in a buttons list the slot is the row. */
  .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));
  }

  /* Includes the bottom padding, so the line reaches the next row. */
  .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 — the kit's one row (`row.css`) ─── */

  /* It takes the width the affordance leaves. */
  .lotics-reorder-item__body {
    flex: 1;
    min-width: 0;
  }

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

  /* A position is a column, sized by the caller's one number, and centres on its entry since it names it. */
  .lotics-reorder-item__body > .lotics-reorder-item__position {
    align-self: stretch;
    width: var(--lotics-reorder-item-position-width);
  }

  /* A column with stretched children, so the caller's row fills the width; a `row` sized a register row to
     its longest label. */
  .lotics-reorder-item__content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
  }

  /* One position's editors sit on a row, wrapping past its width. */
  .lotics-reorder-item__content[data-reorder="buttons"] {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    column-gap: var(--lotics-space-8);
    row-gap: var(--lotics-space-4);
  }
}