const a = "container", s = {
  /**
   * Root Pager Styles
   */
  root: ({ theme: e }) => ({
    display: "flex",
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    width: "100%",
    whiteSpace: "nowrap",
    overflow: "hidden",
    flexShrink: 0,
    flexWrap: "wrap",
    gap: e.vars.size.baseSpacings.sp2,
    "& .M4LSelect-skeletonSelect": {
      width: e.vars.size.baseSpacings.sp14
    },
    "& .M4LTypography-skeleton": {
      height: e.vars.size.baseSpacings.sp8
    }
  }),
  /**
   * Label Select Container Styles
   */
  labelSelectContainer: ({ theme: e }) => ({
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    gap: e.vars.size.baseSpacings.sp2
  }),
  /**
   * Actions Container Styles
   */
  actionsContainer: ({ theme: e }) => ({
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    gap: e.vars.size.baseSpacings.sp2
  }),
  /**
   * Pager Icons Container Styles
   */
  pagerIcons: ({ theme: e }) => ({
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    gap: e.vars.size.baseSpacings["sp0-5"]
  }),
  /**
   * Total Filas elipsis Styles
   */
  totalRow: () => ({
    textOverflow: "ellipsis",
    whiteSpace: "nowrap",
    overflow: "hidden"
  }),
  /**
   * Rows Per Page Styles
   */
  rowsPerPage: {},
  /**
   * Page Counter Styles
   */
  pageCounter: () => ({
    [`& @container ${a} (max-width: 200px)`]: {
      overflow: "hidden",
      whiteSpace: "nowrap",
      textOverflow: "ellipsis",
      maxWidth: "100%",
      display: "inline-block"
    }
  }),
  /**
   *  Container Total Row Select Styles
   */
  containerTotalRowSelect: ({ theme: e }) => ({
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center",
    gap: e.vars.size.baseSpacings.sp4
  })
};
export {
  s as pagerStyles
};
