/* The row's axis and the pane weight flip together at 768, since a weight on a column divides height. A
   container query on an undeclared name is false, so `@media` answers for a row with no boundary and two
   `@container` blocks override it; `:not([data-never])` repeats so specificity ties and order decides.
   Weight and gap are the caller's data (§5 rule 11). */
@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;
    /* 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;
    }
  }
}