@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-stack {
    display: flex;
    /* The DEFAULT axis, declared rather than left to `data-direction` always
       being emitted — a container's own rule has to say how it stacks. */
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    gap: 0;
  }

  .lotics-stack[data-direction="column"] {
    flex-direction: column;
  }
  .lotics-stack[data-direction="row"] {
    flex-direction: row;
  }

  /* EQUAL COLUMNS — the one form that is not a flex run. Grid blockifies its
     children exactly as flex does, which is what every kit container owes them,
     and the point here is that they flow ACROSS rather than along, so there is
     no direction to declare. `minmax(…, 1fr)` with a `0` floor on the fixed
     form: without it a cell's min-content width becomes the column's floor, and
     one long unbroken string pushes the whole grid past its container. */
  .lotics-stack[data-columns] {
    display: grid;
    grid-template-columns: repeat(var(--lotics-stack-columns), minmax(0, 1fr));
  }

  .lotics-stack[data-fluid] {
    grid-template-columns: repeat(auto-fill, minmax(min(var(--lotics-stack-min), 100%), 1fr));
  }

  .lotics-stack[data-gap="none"] {
    gap: 0;
  }
  .lotics-stack[data-gap="2"] {
    gap: var(--lotics-space-2);
  }
  .lotics-stack[data-gap="4"] {
    gap: var(--lotics-space-4);
  }
  .lotics-stack[data-gap="6"] {
    gap: var(--lotics-space-6);
  }
  .lotics-stack[data-gap="8"] {
    gap: var(--lotics-space-8);
  }
  .lotics-stack[data-gap="10"] {
    gap: var(--lotics-space-10);
  }
  .lotics-stack[data-gap="12"] {
    gap: var(--lotics-space-12);
  }
  .lotics-stack[data-gap="16"] {
    gap: var(--lotics-space-16);
  }
  .lotics-stack[data-gap="24"] {
    gap: var(--lotics-space-24);
  }
  .lotics-stack[data-gap="32"] {
    gap: var(--lotics-space-32);
  }
  .lotics-stack[data-gap="48"] {
    gap: var(--lotics-space-48);
  }

  /* THE AXES, AS LONGHANDS AFTER THE SHORTHAND — one axis overrides `gap` by
     declaration order rather than by specificity, the same way `Box` spells
     `paddingX` over `padding`. A grid and a wrapping row have two gutters and
     they answer different questions: a form grid opens its COLUMNS while its
     rows are already spaced by `FormField`'s own rhythm. */
  .lotics-stack[data-gapx="none"] {
    column-gap: 0;
  }

  .lotics-stack[data-gapx="2"] {
    column-gap: var(--lotics-space-2);
  }

  .lotics-stack[data-gapx="4"] {
    column-gap: var(--lotics-space-4);
  }

  .lotics-stack[data-gapx="6"] {
    column-gap: var(--lotics-space-6);
  }

  .lotics-stack[data-gapx="8"] {
    column-gap: var(--lotics-space-8);
  }

  .lotics-stack[data-gapx="10"] {
    column-gap: var(--lotics-space-10);
  }

  .lotics-stack[data-gapx="12"] {
    column-gap: var(--lotics-space-12);
  }

  .lotics-stack[data-gapx="16"] {
    column-gap: var(--lotics-space-16);
  }

  .lotics-stack[data-gapx="24"] {
    column-gap: var(--lotics-space-24);
  }

  .lotics-stack[data-gapx="32"] {
    column-gap: var(--lotics-space-32);
  }

  .lotics-stack[data-gapx="48"] {
    column-gap: var(--lotics-space-48);
  }

  .lotics-stack[data-gapy="none"] {
    row-gap: 0;
  }

  .lotics-stack[data-gapy="2"] {
    row-gap: var(--lotics-space-2);
  }

  .lotics-stack[data-gapy="4"] {
    row-gap: var(--lotics-space-4);
  }

  .lotics-stack[data-gapy="6"] {
    row-gap: var(--lotics-space-6);
  }

  .lotics-stack[data-gapy="8"] {
    row-gap: var(--lotics-space-8);
  }

  .lotics-stack[data-gapy="10"] {
    row-gap: var(--lotics-space-10);
  }

  .lotics-stack[data-gapy="12"] {
    row-gap: var(--lotics-space-12);
  }

  .lotics-stack[data-gapy="16"] {
    row-gap: var(--lotics-space-16);
  }

  .lotics-stack[data-gapy="24"] {
    row-gap: var(--lotics-space-24);
  }

  .lotics-stack[data-gapy="32"] {
    row-gap: var(--lotics-space-32);
  }

  .lotics-stack[data-gapy="48"] {
    row-gap: var(--lotics-space-48);
  }

  .lotics-stack[data-align="start"] {
    align-items: flex-start;
  }
  .lotics-stack[data-align="center"] {
    align-items: center;
  }
  .lotics-stack[data-align="end"] {
    align-items: flex-end;
  }
  .lotics-stack[data-align="stretch"] {
    align-items: stretch;
  }
  .lotics-stack[data-align="baseline"] {
    align-items: baseline;
  }

  .lotics-stack[data-justify="start"] {
    justify-content: flex-start;
  }
  .lotics-stack[data-justify="center"] {
    justify-content: center;
  }
  .lotics-stack[data-justify="end"] {
    justify-content: flex-end;
  }
  .lotics-stack[data-justify="between"] {
    justify-content: space-between;
  }

  .lotics-stack[data-wrap] {
    flex-wrap: wrap;
  }
}