/*
 * THE ROW BEAT, owned in one place.
 *
 * `sm` used to have no minimum and no vertical padding at all, so a static row
 * was as tall as its own contents — 37px measured — while the same component
 * with an `onPress` came out at 49, because only the pressable variant carried
 * padding for its hover wash. Whether a row was a DOOR decided how tall it was,
 * which is two owners for one property that happened never to be compared. 37
 * was also under every other row beat in the kit — `DetailRow` 40, the
 * `TableRow` 52, this component's own `md` 56.
 *
 * The wash spans the WHOLE row, `trailing` included, because `:hover` matches an
 * ancestor whatever the pointer is actually over — no listener, and no state.
 */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-file-row {
    /* THE ROW MEASURES ITSELF. What decides whether the state fits beside the
       name is the width of THIS row — a documents desk is drawn in a 1440 page,
       in a 600 drawer and in a 260 grid cell of the same record, and a window
       read gives all three the page's answer. Which is also the constraint: a
       row may only be laid out by a parent that owns its width (a column, a grid
       cell), because inline-size containment zeroes what the contents
       contribute. */
    container: lotics-file-row / inline-size;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--lotics-space-12);
    /* The row's own beat, not a rung: a file line is measured against
       `DetailRow` and `TableRow`, which are 40 and 52. */
    min-height: 48px;
    padding-block: var(--lotics-space-6);
  }

  /* The `ListItem` beat — for a document row that IS the section's subject. */
  .lotics-file-row[data-size="md"] {
    min-height: 56px;
    padding-block: var(--lotics-space-10);
  }

  /* The negative inline margin cancels the padding for the CONTENT's position
     — the badge stays aligned with static rows and the container edge — while
     the wash bleeds outward into the parent's own padding. A hit area with no
     layout shift; the parent is expected to have at least that much padding. */
  .lotics-file-row[data-pressable] {
    margin-inline: calc(-1 * var(--lotics-row-wash-bleed));
    padding-inline: var(--lotics-row-wash-bleed);
    border-radius: calc(var(--lotics-radius-control) - var(--lotics-space-2));
    transition: background-color var(--lotics-duration-fast) var(--lotics-ease-standard);
  }

  .lotics-file-row[data-pressable]:hover {
    background-color: var(--lotics-wash-hover);
  }

  .lotics-file-row[data-pressable]:active {
    background-color: var(--lotics-wash-selected);
  }

  /* The accessible "Open" door — fills the row left of the trailing sibling. */
  .lotics-file-row__door {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: 1;
    min-width: 0;
    gap: var(--lotics-space-12);
    padding: 0;
    border: 0 solid var(--border);
    border-radius: calc(var(--lotics-radius-control) - var(--lotics-space-2));
    background: transparent;
    text-align: start;
    appearance: none;
    cursor: default;
  }

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

  /*
   * ONE SLOT FOR EITHER FACE.
   *
   * A picture is a square and a badge is taller than it is wide, so drawn at
   * their own sizes the two marks left the names in one list starting at two
   * different x's and the rows nine pixels apart in height — the column behind
   * the mark stopped being a column. The slot is a fixed square both are centred
   * in; `file_row.tsx` states its side, because that is where the picture's size
   * and the badge's fitted width are derived from one number.
   */
  .lotics-file-row__mark {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex: none;
    /* A SQUARE, both dimensions: with the width alone the badge's 55 and the
       picture's 56 still put a pixel between two rows of the same list, and the
       slot is what the column is measured from rather than whatever it holds. */
    width: var(--lotics-file-row-mark);
    height: var(--lotics-file-row-mark);
  }

  /*
   * THE NAME'S OWN COLUMN — the name, what it says about itself, its state and
   * its annotations. Narrow, that is all it is: a stack in reading order, which
   * is what puts the state UNDER the name rather than beside it.
   */
  .lotics-file-row__text {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 1;
    /* What lets a flex child be narrower than its content; without it the
       filename's clamp never gets a chance to bite. */
    min-width: 0;
    gap: var(--lotics-space-2);
  }

  .lotics-file-row__status {
    display: flex;
    flex-direction: row;
    align-items: center;
    min-width: 0;
  }

  /*
   * THE STATE IS THE SIDE THAT GIVES WAY, never the filename.
   *
   * On a narrow row a "Còn hiệu lực" badge took 137 of 202 pixels and what was
   * cut was the NAME — the one thing identifying the row; two independent app
   * reviews walked into it. So the state only sits beside the name where the row
   * can hold both: under 400px a 19-character kind label leaves the name less
   * than half the line, and a name cut in half names nothing.
   */
  @container lotics-file-row (width >= 400px) {
    .lotics-file-row__text {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      grid-template-areas:
        "name status"
        "meta status"
        "note note";
      align-items: center;
      column-gap: var(--lotics-space-12);
      row-gap: var(--lotics-space-2);
    }

    .lotics-file-row__name {
      grid-area: name;
    }

    .lotics-file-row__meta {
      grid-area: meta;
    }

    .lotics-file-row__status {
      grid-area: status;
      justify-self: end;
    }

    .lotics-file-row__note {
      grid-area: note;
    }
  }
}