const s = {
  /**
   * Estilos para el contenedor raíz del menú.
   */
  root: () => ({
    width: "fit-content"
  }),
  /**
   * Estilos para el MenuList
   */
  menuList: ({ theme: e }) => ({
    paddingTop: e.vars.size.baseSpacings.sp3,
    paddingBottom: e.vars.size.baseSpacings.sp3,
    display: "flex",
    flexDirection: "column",
    gap: e.vars.size.baseSpacings.sp1,
    "& > div": {
      paddingLeft: e.vars.size.baseSpacings.sp4,
      paddingRight: e.vars.size.baseSpacings.sp4
    }
  }),
  /**
   * Estilos para el MenuLoader
   */
  menuLoader: () => ({
    display: "flex",
    alignContent: "center"
  }),
  /**
   * Estilos para el IconButton
   */
  iconButton: ({ theme: e, ownerState: a }) => ({
    backgroundColor: a?.selected ? e.vars.palette[a?.paletteColor ?? "default"].selectedOpacity : "transparent",
    // outline: 'none',
    "& hover": {
      backgroundColor: e.vars.palette[a?.paletteColor ?? "default"].selected
    },
    "& active": {
      backgroundColor: e.vars.palette[a?.paletteColor ?? "default"].selectedOpacity
    },
    "& .M4LIcon-icon": {
      backgroundColor: a?.selected ? e.vars.palette[a?.paletteColor ?? "default"].selected : void 0
    }
  }),
  /**
   * Estilos para el HeaderMenuActions
   */
  headerMenuActions: () => ({
    width: "100%"
  }),
  footerMenuActions: () => ({
    width: "100%"
  })
  /**
   * Estilos para el Popover del menú de acciones.
   */
  // popover: ({ theme }) => ({
  //   '& .MuiPaper-elevation': {
  //     display: 'flex',
  //     flexDirection: 'column',
  //     gap: theme.vars.size.baseSpacings.sp1,
  //   },
  // }),
};
export {
  s as menuActionsStyles
};
