/*
 * THE SPLIT ROW. Two properties do all the work: the row's axis, and whether a
 * pane's weight is on it. Both flip together at 768 — a weight left on a column
 * divides HEIGHT, which is the defect this component exists to prevent — so the
 * axis and the `flex` triple are never written apart.
 *
 * The width question is the enclosing BOUNDARY's, in three blocks: a container
 * query on a name nothing declares is FALSE rather than unknown, so the `@media`
 * block states the answer for a row with no boundary over it — where the window
 * IS the container — and the two `@container` blocks after it override that in
 * both directions. `:not([data-never])` is repeated in the wide block so the two
 * carry equal specificity and source order decides between them.
 *
 * The weight and the gap arrive as custom properties because they are the
 * caller's DATA (§5 rule 11); everything else about the row is a rung.
 */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-split-row {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    flex-shrink: 0;
    min-width: 0;
    gap: var(--lotics-split-row-gap, var(--lotics-space-16));
  }

  .lotics-split-row__pane {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    /* The share of the ROW's width — the default, undone wherever it stacks. */
    flex-grow: var(--lotics-split-row-weight);
    flex-shrink: 1;
    flex-basis: 0%;
  }

  @media (width < 768px) {
    .lotics-split-row:not([data-never]) {
      flex-direction: column;
    }

    .lotics-split-row:not([data-never]) > .lotics-split-row__pane {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: auto;
    }
  }

  @container lotics-boundary (width >= 768px) {
    .lotics-split-row:not([data-never]) {
      flex-direction: row;
    }

    .lotics-split-row:not([data-never]) > .lotics-split-row__pane {
      flex-grow: var(--lotics-split-row-weight);
      flex-shrink: 1;
      flex-basis: 0%;
    }
  }

  @container lotics-boundary (width < 768px) {
    .lotics-split-row:not([data-never]) {
      flex-direction: column;
    }

    .lotics-split-row:not([data-never]) > .lotics-split-row__pane {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: auto;
    }
  }
}