import { getSizeStyles as t } from "../../../../utils/getSizeStyles/getSizeStyles.js";
const o = {
  /**
   * Container for the group items in the sidebar
   */
  containerTreeGroupItems: ({ theme: i, ownerState: a }) => ({
    display: "flex",
    width: "100%",
    height: "100%",
    flex: 1,
    flexDirection: "column",
    overflowY: "auto",
    alignItems: "center",
    justifyContent: a?.noItems ? "center" : "flex-start",
    transition: "all 0.5s",
    paddingTop: i.vars.size.baseSpacings.sp3,
    paddingLeft: i.vars.size.baseSpacings.sp4,
    paddingRight: i.vars.size.baseSpacings.sp4,
    gap: i.vars.size.baseSpacings.sp4,
    ...!a?.anchored && !i.generalSettings.isMobile && {
      transition: "all 0.5s",
      visibility: "hidden"
    }
  }),
  /**
   * Wrapper for every principal item group in the sidebar
   */
  containerContentGroups: () => ({
    display: "flex",
    width: "100%",
    height: "auto",
    flexDirection: "column"
  }),
  /**
   * Title wrapper for every principal item group in the sidebar
   */
  containerContentTitle: ({ theme: i, ownerState: a }) => ({
    padding: `${i.vars.size.baseSpacings.sp3} ${i.vars.size.baseSpacings.sp4} ${i.vars.size.baseSpacings.sp1}`,
    color: i.vars.palette.text.primary,
    width: "100%",
    textAlign: "left",
    "& .MuiTypography-root": {
      color: a?.disabled ? `${i.vars.palette.text.primary} !important` : i.vars.palette.text.primary
    }
  }),
  /**
   * Navigation wrapper for every principal item group in the sidebar
   */
  containerContentNavItems: ({ theme: i }) => ({
    display: "flex",
    flexDirection: "column",
    gap: i.vars.size.baseSpacings["sp0-5"],
    marginRight: i.vars.size.baseSpacings.sp4
  }),
  /**
   *Container for the items in the sidebar group
   */
  containerContentItem: ({ theme: i }) => ({
    display: "flex",
    flexDirection: "row",
    rowGap: i.spacing(0.5),
    height: "fit-content",
    alignItems: "center",
    cursor: "pointer",
    padding: i.spacing(0.5)
  }),
  /**
   *Style para el contenedor del icono de flecha que indica si el item está colapsado o descolapsado para los items padres
   */
  containerArrowIconRoot: () => ({
    display: "flex",
    alignSelf: "center",
    lineHeight: 0,
    marginLeft: "auto"
  }),
  /**
   * Wrapper for the menu item
   */
  wrapperMenuItem: ({ theme: i, ownerState: a }) => ({
    display: "flex",
    position: "relative",
    paddingTop: i.vars.size.baseSpacings.sp2,
    paddingBottom: i.vars.size.baseSpacings.sp2,
    paddingLeft: i.vars.size.baseSpacings.sp2,
    ...t(
      i,
      a?.size || "medium",
      "container",
      (n) => ({
        minHeight: n,
        height: "auto"
      })
    )
  }),
  /**
   * Styles applied to the container of the adornment icon in the header component
   */
  containerAdornmentIcon: ({ theme: i, ownerState: a }) => ({
    overflow: "visible",
    borderRadius: i.vars.size.borderRadius["r1-5"],
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    position: "relative",
    width: "fit-content",
    height: "fit-content",
    minWidth: "fit-content",
    minHeight: "fit-content",
    padding: "1px",
    "& .M4LIcon-root": {
      width: "fit-content",
      height: "fit-content",
      padding: i.vars.size.baseSpacings["sp0-5"],
      "& .M4LIcon-icon": {
        ...t(
          i,
          a?.size || "medium",
          "base",
          (n) => ({
            width: `${n}!important`,
            height: `${n}!important`,
            minWidth: `${n}!important`,
            minHeight: `${n}!important`
          })
        )
      }
    },
    ...a?.variant !== "itemActive" && a?.variant !== "normal" && {
      "& .M4LIcon-icon": {
        backgroundColor: `${i.vars.palette.chips.persianGreen.contained.colorTone}!important`
      }
    },
    ...a?.variant === "normal" && {
      "& .M4LIcon-icon": {
        backgroundColor: `${i.vars.palette.text.secondary}!important`
      }
    },
    ...a?.variant === "main" && {
      backgroundColor: i.vars.palette.chips.persianGreen.contained.backgroundColorTone
    },
    ...a?.variant === "root" && {
      backgroundColor: i.vars.palette.primary.enabled,
      boxShadow: i.vars.customShadows.primary2
    },
    ...a?.variant === "itemActive" && {
      boxShadow: i.vars.customShadows.primary2,
      background: `linear-gradient(to right, 
      ${i.vars.palette.primary.opacityGradient1}, 
      ${i.vars.palette.primary.opacityGradient2})`,
      "& .M4LSideBar-backgroundAdornmentIcon": {
        background: i.vars.palette.background.default
      },
      "&::before": {
        content: '""',
        position: "absolute",
        inset: "1.4px",
        background: i.vars.palette.primary.enabledOpacity,
        borderRadius: "5px"
      },
      "& .M4LIcon-icon": {
        backgroundColor: `${i.vars.palette.primary.enabled}!important`
      }
    }
  }),
  /**
   * Styles applied to the background of the adornment icon in the header component
   */
  backgroundAdornmentIcon: () => ({
    width: "100%",
    height: "100%",
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    borderRadius: "5px"
  })
};
export {
  o as contentGroupStyles
};
