import { style } from "@vanilla-extract/css";

import { dictionary } from "../dictionary";

/*
 * usage:
 * <div className={grid.root}>
 *   <div className={grid[12]}></div>
 *   <div className={grid[3]}</div>
 *   <div className={grid[9]}</div>
 * </div>
 *
 * this example will result in two "rows"
 * the grid is 12 wide, so the first child will
 * obviously span all the way across, then
 * the 3 and 9 will go on one "row" together
 *
 * but when we add responsive conditions to the
 * grid code, we could have the elements in these
 * examples flow/wrap differently since they're
 * siblings. CSS grid will give us flexibility we
 * don't currently have
 */
export const grid = {
  root: style({
    display: "grid",
    gap: dictionary.tokens.size.grid.gutter.value,
    gridTemplateColumns: dictionary.tokens.grid.columns.standard.attributes.cssValue,
  }),

  /*
   * manually enumerating these rather than using a loop of some kind
   * allows for the TypeScript typing to be inferred; otherwise the
   * type would have to be written out separately and manually enumerate
   * these properties anyway
   */
  1: style({ gridColumn: "span 1" }),
  2: style({ gridColumn: "span 2" }),
  3: style({ gridColumn: "span 3" }),
  4: style({ gridColumn: "span 4" }),
  5: style({ gridColumn: "span 5" }),
  6: style({ gridColumn: "span 6" }),
  7: style({ gridColumn: "span 7" }),
  8: style({ gridColumn: "span 8" }),
  9: style({ gridColumn: "span 9" }),
  10: style({ gridColumn: "span 10" }),
  11: style({ gridColumn: "span 11" }),
  12: style({ gridColumn: "span 12" }),
};