import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
import { styleVariants } from "@vanilla-extract/css";
import { responsiveStyle } from "../../css/responsiveStyle.mjs";
setFileScope("src/lib/components/Tiles/Tiles.css.ts", "braid-design-system");
const columnsWidths = {
  1: "100%",
  2: `${100 / 2}%`,
  3: `${100 / 3}%`,
  4: `${100 / 4}%`,
  5: `${100 / 5}%`,
  6: `${100 / 6}%`
};
const makeColumnsAtoms = (breakpoint) => styleVariants(columnsWidths, (width) => responsiveStyle({
  [breakpoint]: {
    flex: `0 0 ${width}`
  }
}), `columns_${breakpoint}`);
const columnsMobile = makeColumnsAtoms("mobile");
const columnsTablet = makeColumnsAtoms("tablet");
const columnsDesktop = makeColumnsAtoms("desktop");
const columnsWide = makeColumnsAtoms("wide");
endFileScope();
export {
  columnsDesktop,
  columnsMobile,
  columnsTablet,
  columnsWide
};
