/*
 * THE EDITABLE MONEY BAND. Every charge is the kit's one row (`row.css`); money columns right-align
 * and the total lands on the amount column, so the band adds up by eye. The fold reads the band's
 * width, not the window's: folded, the amounts still share an edge with the total.
 */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-charge-lines {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    /*
     * A rung past the widest in-line gap, so a line and its detail never sit as close as the next
     * line.
     */
    gap: var(--lotics-space-12);
    container: lotics-charge-lines / inline-size;
  }

  /* Its slots are the columns the total closes, so a squeeze comes out of the name. */
  .lotics-charge-lines__maths {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-shrink: 0;
    min-width: 0;
    gap: var(--lotics-space-4);
  }

  /* The band wraps between the two blocks, never inside either. */
  .lotics-charge-lines__terms,
  .lotics-charge-lines__result {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-shrink: 0;
    min-width: 0;
    gap: inherit;
  }

  .lotics-charge-lines__qty {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex-shrink: 0;
    width: 76px;
  }

  /*
   * The operator is a glyph, not a column; letting it close up keeps the money columns on their
   * edges.
   */
  .lotics-charge-lines__op {
    display: block;
    flex-shrink: 1;
    width: 14px;
  }

  .lotics-charge-lines__price {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex-shrink: 0;
    width: 132px;
  }

  /*
   * Sized for `1.140.000.000 ₫` and `− 500.000.000 ₫` (110px at 14px Inter) plus the inset; at 124
   * a real total printed as two numbers — a wrong figure.
   */
  .lotics-charge-lines__amount {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex-shrink: 0;
    width: 128px;
  }

  /* A value where an editor stands lines up with the editor. */
  .lotics-charge-lines__value {
    display: block;
    padding-inline: var(--lotics-control-text-inset);
  }

  /*
   * A money string is one token: breaking at the ₫ space or between digits (`Text`'s
   * `overflow-wrap`) prints a different figure. The name wraps first, then the operator closes. Two
   * classes because a tie with `Text`'s sheet resolves on emit order.
   */
  .lotics-charge-lines__maths .lotics-charge-lines__value {
    white-space: nowrap;
  }

  .lotics-charge-lines__action {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
    width: 32px;
  }

  /*
   * No verb drawn, no verb gutter (the total's too); no editor, no frame inset. Read-only, figures
   * end on the band's edge.
   */
  .lotics-charge-lines:not(:has(.lotics-charge-lines__action:not(:empty))) .lotics-charge-lines__action {
    display: none;
  }

  .lotics-charge-lines:not(:has(.lotics-charge-lines__maths input)) .lotics-charge-lines__maths .lotics-charge-lines__value {
    padding-inline: 0;
  }

  /* At a control's width rather than the band's. */
  .lotics-charge-lines__extra {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    max-width: 200px;
  }

  .lotics-charge-lines__warning {
    display: block;
  }

  .lotics-charge-lines__total {
    padding-top: var(--lotics-space-8);
    border-top: 1px solid var(--border);
  }

  /*
   * The total prints a weight up, so its slot grows leftward into the label, keeping the right edge
   * the band adds up on.
   */
  .lotics-charge-lines__total .lotics-charge-lines__amount {
    width: auto;
    min-width: 128px;
  }

  .lotics-charge-lines__commit {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    align-self: flex-start;
    padding-top: var(--lotics-space-4);
  }

  .lotics-charge-lines__empty {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    padding-block: var(--lotics-space-8);
  }

  @container lotics-charge-lines (width < 520px) {
    /*
     * Slots of 56 + 14 + 108 + 128 + 32 with gutters of 2; a row that cannot seat terms and amount
     * wraps the amount under its terms. The pixels come from beside the money columns, never out of
     * them.
     */
    /* A content-sized block never wraps and ran the folded amount past the band's edge. */
    .lotics-charge-lines__maths {
      max-width: 100%;
      flex-wrap: wrap;
      justify-content: flex-end;
      row-gap: var(--lotics-space-4);
      column-gap: var(--lotics-space-2);
    }

    /* Read arithmetic moves to the line (`Row.Line folded`) rather than squeezing the name. */
    .lotics-charge-lines__terms[data-read] {
      display: none;
    }

    /* 48 clipped `28,9`; decimal quantities are ordinary for goods sold by weight. */
    .lotics-charge-lines__qty {
      width: 56px;
    }

    /* Sized for an eight-figure đồng unit price (90px) plus the inset. */
    .lotics-charge-lines__price {
      width: 108px;
    }

    /*
     * Folded, the name has the band to itself, so it wraps rather than losing its words. Three
     * classes to outrank `Text`'s two-class clamp regardless of emit order.
     */
    .lotics-charge-lines .lotics-charge-lines__line .lotics-charge-lines__label {
      -webkit-line-clamp: none;
      line-clamp: none;
    }
  }
}