import { css } from '@emotion/react';
import {
  generateAdditionalGridConfig,
  generateGridConfig,
  generateGridRowsAndColumns,
  generateGridGaps,
} from '../generators';
import { GumGrids } from '../models';

/**
 * Generate grid utils
 */
export const grid: GumGrids = {
  display: css`
    display: grid;
  `,
  ...generateGridRowsAndColumns(),
  config: {
    ...generateAdditionalGridConfig(),
    page: generateGridConfig(),
  },
  full: {
    col: css`
      grid-column: 1 / -1;
    `,
    row: css`
      grid-row: 1 / -1;
    `,
  },
  gap: generateGridGaps(),
};