import { getSpacingValue as t } from "./helpers/getSpacingValue/getSpacingValue.js";
import { CONTAINER_FLOW_MIN_WIDTH_VALUES as r, CONTAINER_QUERY_NAME as a } from "./constants.js";
const p = {
  /**
   * Estilos para el contenedor raíz del componente.
   */
  root: ({ ownerState: i }) => ({
    width: "100%",
    height: "100%",
    gap: t(i?.gap ?? "standard"),
    containerName: a,
    containerType: "inline-size",
    ...i?.variant === "grid-layout" && {
      display: "grid",
      gridTemplateColumns: `repeat(auto-fill, minmax(${i.minWidth ?? 200}px, 1fr))`,
      height: "fit-content"
    },
    ...(i?.variant === "column-flex" || i?.variant === "flex-wrap") && {
      display: "flex",
      flexDirection: "row",
      flexWrap: "wrap",
      height: "fit-content",
      "& > .M4LContainerFlow-wrapperItem": {
        minWidth: i?.minWidth ?? r,
        flex: 1
      },
      [`@container ${a} (max-width: ${i?.minWidth ? i?.minWidth - 1 : 199}px)`]: {
        "& > .M4LContainerFlow-wrapperItem": {
          minWidth: "100%",
          maxWidth: "100%"
        }
      }
    }
  }),
  /**
   * Estilos para el contenedor de los items del componente.
   */
  wrapperItem: () => ({
    display: "flex",
    flexDirection: "row",
    flexWrap: "wrap"
  })
};
export {
  p as containerFlowStyles
};
