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

@layer lotics.components {
  .lotics-stack {
    display: flex;
    /* Declared, since a container's own rule must 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;
  }

  /* Grid blockifies children like flex and flows across, so no direction. The `0` floor in `minmax` stops
     one long string's min-content from pushing the 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);
  }

  /* Longhands after the shorthand override by order, as `Box`'s `paddingX`; a form grid opens columns
     while `FormField` already spaces rows. */
  .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;
  }
}