import { CLASS_NAME_IS_ROOT as r, CLASS_NAME_MENU_ACTIVE as a, CLASS_NAME_ITEM_IN_TREE_ACTIVE as t, CLASS_NAME_HAS_CHILDREN as p, CLASS_NAME_ITEM_CLOSED as s } from "../../constants.js";
import { getTypographyStyles as i } from "../../../../utils/getTypographyStyles.js";
import { getSizeStyles as d } from "../../../../utils/getSizeStyles/getSizeStyles.js";
const c = {
  /**
   * Estilos del contenedor principal del sidebar
   */
  contentComponentRoot: ({ theme: e, ownerState: o }) => ({
    position: "relative",
    display: "flex",
    flexDirection: "column",
    height: "100%",
    width: "100%",
    backgroundColor: e.vars.palette.background.default,
    '& [class*="M4LMenuItem-root"]': {
      ...d(
        e,
        o?.size || "medium",
        "action",
        (n) => ({
          minHeight: `${n}!important`
        })
      )
    }
  }),
  /**
   * Contenedor que abraza el contenido del menu en primer lugar.
   */
  containerTreeItemsHeaderFooter: ({ theme: e, ownerState: o }) => ({
    height: "100%",
    width: "100%",
    flex: 1,
    overflow: "hidden",
    display: "flex",
    flexDirection: "column",
    gap: e.vars.size.baseSpacings.sp4,
    padding: "3px",
    paddingBottom: e.vars.size.baseSpacings.sp4,
    ...!o?.anchored && o?.variant !== "host" && {
      transition: "all 0.5s",
      paddingLeft: "unset",
      paddingRight: "unset"
    },
    '& [class*="M4LMenuItem-root"], & [class*="M4LMenuItem-skeletonMenuItem"]': {
      height: "fit-content"
    },
    "& .M4LMenuItem-root": {
      border: "unset",
      paddingTop: 0,
      paddingBottom: 0,
      paddingLeft: 0,
      paddingRight: e.vars.size.baseSpacings.sp2,
      borderRadius: e.vars.size.borderRadius["r1-5"],
      backgroundColor: "transparent!important",
      gap: e.vars.size.baseSpacings["sp2-5"],
      "& .M4LMenuItem-menuItemLabelWrapper": {
        overflow: "hidden",
        "& .M4LTypography-root": {
          display: "-webkit-box",
          whiteSpace: "normal",
          overflow: "hidden",
          textOverflow: "ellipsis",
          WebkitBoxOrient: "vertical",
          WebkitLineClamp: 3,
          lineClamp: 3,
          overflowWrap: "anywhere",
          width: "100%"
        }
      },
      '& [class*="M4LMenuItem-menuItemContainer"]': {
        gap: e.vars.size.baseSpacings["sp2-5"],
        overflow: "visible"
      },
      "&.menu-active": {
        "& .M4LTypography-root": {
          color: `${e.vars.palette.primary.semanticText}!important`
        }
      },
      "& .M4LTypography-root": {
        paddingLeft: 0,
        ...i(
          e.generalSettings.isMobile,
          o?.size || "medium",
          "captionStandard"
        )
      }
    }
  }),
  /**
   * Contenedor que contiene grupo menu item desplegable.
   */
  containerNodeMenuItem: ({ theme: e }) => ({
    marginLeft: e.vars.size.baseSpacings["sp3-5"],
    display: "flex",
    flexDirection: "column",
    overflow: "visible",
    position: "relative",
    gap: e.vars.size.baseSpacings.sp1,
    '& [class*="M4LMenuItem-root"]:not(.menu-active)': {
      "& .M4LTypography-root": {
        color: `${e.vars.palette.text.secondary}!important`
      }
    },
    "& .MuiCollapse-root": {
      position: "relative",
      "& .M4LSideBar-containerNodeMenuItem": {
        marginLeft: e.vars.size.baseSpacings["sp3-5"]
      },
      "& > .MuiCollapse-wrapper > .MuiCollapse-wrapperInner > .M4LSideBar-containerNodeMenuItem:first-child > .M4LSideBar-wrapperMenuItem > .M4LMenuItem-root:after": {
        top: "10px!important"
      },
      "& .MuiCollapse-wrapper .MuiCollapse-wrapperInner .M4LSideBar-containerNodeMenuItem:last-child .M4LSideBar-wrapperMenuItem .M4LMenuItem-root::after": {
        bottom: "12px!important"
      }
    },
    [`&.${r}`]: {
      margin: "unset",
      border: `${e.vars.size.borderStroke.container}!important`,
      borderColor: "transparent!important",
      paddingLeft: e.vars.size.baseSpacings.sp1,
      "& > .MuiCollapse-root > .MuiCollapse-wrapper > .MuiCollapse-wrapperInner::before": {
        display: "none"
      },
      "&:not(.item-in-tree-active) > .M4LSideBar-wrapperMenuItem .M4LSideBar-backgroundAdornmentIcon .M4LIcon-root .M4LIcon-icon": {
        backgroundColor: `${e.vars.palette.text.primary}!important`
      }
      /*  '& > .MuiCollapse-root': {
        paddingRight: theme.vars.size.baseSpacings['sp0-5'],
      }, */
    },
    [`&.M4LSidebar-containerNodeMenuItem > M4LSideBar-wrapperMenuItem > .M4LMenuItem-root[class*="${t}"] .M4LIconClass-root`]: {
      background: e.vars.palette.text.primary
    },
    [`& > .MuiCollapse-root > .MuiCollapse-wrapper .MuiCollapse-wrapperInner > .M4LSideBar-containerNodeMenuItem:last-child > .M4LSideBar-wrapperMenuItem > .M4LMenuItem-root:not(.${r}).${a}`]: {
      "& .M4LMenuItem-menuItemContainer": {
        "&::before": {
          content: '""',
          borderLeft: "3px solid",
          borderColor: e.vars.palette.background.default,
          width: "3px",
          height: "90%",
          bottom: "-10px",
          position: "absolute",
          left: "-13px",
          zIndex: 1
        }
      }
    },
    [`& > .M4LSideBar-wrapperMenuItem > .M4LMenuItem-root:not(.${r}).${a}`]: {
      [`&.${p}:not(.${s})`]: {
        '& [class*="M4LMenuItem-menuItemContainer"]:before': {
          content: '""',
          borderLeft: "3px solid",
          borderColor: e.vars.palette.background.default,
          width: "3px",
          height: "90%",
          bottom: "-10px",
          position: "absolute",
          left: "-13px",
          zIndex: 1
        }
      },
      "&::before": {
        content: '""',
        position: "absolute",
        width: "5px",
        height: "5px",
        top: "50%",
        transform: "translateY(-50%)",
        left: "-10px",
        borderRadius: e.vars.size.borderRadius["r0-5"],
        backgroundColor: e.vars.palette.primary.focus,
        zIndex: 2
      },
      "&::after": {
        content: '""',
        position: "absolute",
        width: "1px",
        top: "0px",
        bottom: "0px",
        left: "-8px",
        backgroundImage: `linear-gradient(180deg, 
        transparent 0%,
        ${e.vars.palette.primary.opacityGradient1} 50%,
        transparent 100%)`,
        zIndex: 1
      }
    },
    [`&.${r}.${a}.${t} > .M4LSideBar-wrapperMenuItem`]: {
      backgroundColor: e.vars.palette.primary.opacity
    },
    [`&.${r}.${a} > .M4LSideBar-wrapperMenuItem`]: {
      backgroundColor: e.vars.palette.primary.opacity
    },
    [`&.${r} > .M4LSideBar-wrapperMenuItem`]: {
      paddingTop: e.vars.size.baseSpacings.sp1,
      paddingBottom: e.vars.size.baseSpacings.sp1,
      paddingLeft: 0,
      paddingRight: 0
    },
    [`& > .M4LSideBar-wrapperMenuItem > .M4LMenuItem-root.${r}.${a}`]: {
      borderBottomLeftRadius: 0,
      borderBottomRightRadius: 0
    },
    "& .MuiCollapse-wrapperInner": {
      display: "flex",
      flexDirection: "column",
      paddingLeft: 0,
      paddingBottom: e.vars.size.baseSpacings.sp1,
      paddingTop: 0,
      "&:before": {
        content: '""',
        position: "absolute",
        width: "6px",
        top: "-8px",
        bottom: "-13px",
        left: "-2px",
        backgroundColor: e.vars.palette.background.default,
        zIndex: 1
      }
    },
    [`&.${r}.${a}`]: {
      backgroundColor: e.vars.palette.background.default,
      borderRadius: e.vars.size.borderRadius.r2,
      border: e.vars.size.borderStroke.container,
      borderColor: `${e.vars.palette.primary.selectedOpacity}!important`,
      boxShadow: e.vars.customShadows.z1,
      overflow: "hidden"
    },
    "& .MuiCollapse-root:first-of-type": {
      position: "relative"
    },
    "&.menu-active .MuiCollapse-wrapper.MuiCollapse-vertical:first-of-type:before": {
      content: '""',
      position: "absolute",
      width: "1px",
      top: "20px",
      bottom: "26px",
      left: "14px",
      borderLeft: e.vars.size.borderStroke.container,
      borderColor: e.vars.palette.border.secondary,
      zIndex: 1
    }
  }),
  /**
   * Container for the main menu item.
   */
  containerNodeMenuItemMain: ({ theme: e }) => ({
    gap: e.vars.size.baseSpacings.sp1,
    "& > .M4LSideBar-wrapperMenuItem": {
      paddingTop: e.vars.size.baseSpacings.sp1,
      paddingBottom: e.vars.size.baseSpacings.sp1,
      paddingLeft: 0,
      paddingRight: 0
    }
  }),
  /**
   * Estilos del menu item principal.
   */
  menuItemMain: ({ theme: e, ownerState: o }) => ({
    "& .M4LSideBar-containerArrowIconRoot": {
      marginLeft: "unset"
    },
    "&&& .M4LTypography-root": {
      ...i(
        e.generalSettings.isMobile,
        o?.size || "medium",
        "body"
      )
    }
  })
};
export {
  c as contentComponentStyles
};
