/*
 * ONE ALIGNMENT LAW: the row top-aligns and each cell centres within the first control line, so a
 * tall value never drags the label down. Band and label column arrive as custom properties;
 * `--lotics-detail-row-lead` pads the label as centring one line would, so extra lines grow
 * downward.
 */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@import "./detail_table.css";

@layer lotics.components {
  .lotics-detail-row {
    --lotics-detail-row-lead: max(
      0px,
      calc((var(--lotics-detail-row-min-height) - var(--lotics-leading-tight-sm)) / 2)
    );
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    min-width: 0;
    min-height: var(--lotics-detail-row-min-height);
    gap: var(--lotics-space-8);
  }

  /* The band moves to the value row. */
  .lotics-detail-row[data-stacked] {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    gap: var(--lotics-space-4);
  }

  .lotics-detail-row__label {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    min-width: 0;
    min-height: var(--lotics-detail-row-min-height);
    padding-top: var(--lotics-detail-row-lead);
  }

  /* With shrink on both floorless items the label collapses; the value wraps, so it gives way. */
  .lotics-detail-row__label[data-variant="spread"] {
    flex: 1 0 auto;
  }

  .lotics-detail-row__label[data-variant="form"] {
    flex: 0 0 auto;
    width: var(--lotics-detail-row-label-width);
  }

  .lotics-detail-row__value {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
  }

  .lotics-detail-row__value[data-variant="spread"] {
    flex: 0 1 auto;
  }

  /* So every inline editor spans the same width. */
  .lotics-detail-row__value[data-variant="form"] {
    flex: 1 1 0%;
  }

  /* `FieldAnnotations`' own line rhythm. */
  .lotics-detail-row__value[data-annotated] {
    gap: var(--lotics-space-2);
  }

  /* The row is the column now. */
  .lotics-detail-row__value[data-stacked] {
    flex: 0 0 auto;
  }

  /* The control centres here as the label does. */
  .lotics-detail-row__control {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 0;
    min-height: var(--lotics-detail-row-min-height);
  }

  .lotics-detail-row__annotations {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
  }

  /*
   * A flat value leaves slack under its text; tucking the annotations up matches a chip row's gap.
   */
  .lotics-detail-row__annotations[data-flat] {
    margin-top: calc(var(--lotics-detail-row-lead) * -1);
  }
}