import { getSizeStyles as e } from "../../../../utils/getSizeStyles/getSizeStyles.js";
import { MENUITEM_CLASSES as a } from "./constants.js";
const l = {
  /**
   * Styles for the menu item root container.
   */
  root: ({ theme: i, ownerState: r }) => {
    const o = r?.selected ? r?.color === "error" ? r?.color : "primary" : r?.color, s = i.vars.palette[o ?? "default"], t = (n) => r?.color === "default" && !r?.selected ? i.vars.palette.text.primary : s[n];
    return {
      width: "100%",
      gap: r?.hasDescription ? i.vars.size.baseSpacings.sp2 : i.vars.size.baseSpacings.sp1,
      paddingTop: r?.hasDescription ? i.vars.size.baseSpacings.sp2 : i.vars.size.baseSpacings["sp1-5"],
      paddingBottom: r?.hasDescription ? i.vars.size.baseSpacings.sp2 : i.vars.size.baseSpacings["sp1-5"],
      paddingLeft: i.vars.size.baseSpacings.sp2,
      paddingRight: i.vars.size.baseSpacings.sp2,
      border: i.vars.size.borderStroke.container,
      borderColor: "transparent",
      transition: "background-color 0.3s ease",
      borderRadius: i.vars.size.borderRadius["r1-5"],
      // Base styles for text and icon.
      [`&&& .M4LTypography-root:not(.${a.menuItemDescription})`]: {
        color: t("semanticText")
      },
      "&.Mui-disabled": {
        opacity: "1 !important",
        "& .M4LTypography-root": {
          color: `${i.vars.palette.text.disabled} !important`
        },
        [`& .${a.menuItemIcon}.M4LIcon-root:not(.${a.iconExternal}) .M4LIcon-icon`]: {
          backgroundColor: `${i.vars.palette.text.disabled} !important`
        }
      },
      "&:active": {
        backgroundColor: `${s.activeOpacity}`,
        [`& .${a.menuItemIcon}.M4LIcon-root:not(.${a.iconExternal}) .M4LIcon-icon`]: {
          backgroundColor: t("active")
        },
        [`&&& .M4LTypography-root:not(.${a.menuItemDescription})`]: {
          color: t("active")
        }
      },
      "&&&:hover": {
        backgroundColor: `${s.hoverOpacity}`
      },
      ...r?.selected && {
        backgroundColor: `${s.opacity}`,
        border: i.vars.size.borderStroke.container,
        borderColor: s.enabledOpacity
      },
      ...e(
        i,
        r?.size || "medium",
        "box",
        (n) => ({
          //height: 'auto !important',
          minHeight: `${n}!important`,
          height: "fit-content  "
        })
      )
    };
  },
  /** Styles for menu item icon slots. */
  menuItemIcon: ({ ownerState: i, theme: r }) => {
    const o = i?.selected ? i?.color === "error" ? r.vars.palette.error.semanticText : r.vars.palette.primary.semanticText : i?.color === "default" ? r.vars.palette.text.primary : r.vars.palette[i?.color ?? "default"].semanticText;
    return {
      "&.MenuItemEndIcon-root": {
        marginLeft: "auto"
      },
      [`&.${a.menuItemIcon}.M4LIcon-root:not(.${a.iconExternal}) .M4LIcon-icon`]: {
        backgroundColor: o
      }
    };
  },
  /** Styles for checked icon slot. */
  menuItemIconChecked: ({ theme: i, ownerState: r }) => {
    const o = r?.selected ? r?.color === "error" ? i.vars.palette.error.semanticText : i.vars.palette.primary.semanticText : r?.color === "default" ? i.vars.palette.text.primary : i.vars.palette[r?.color ?? "default"].semanticText;
    return {
      visibility: r?.checkable && r?.checked ? "visible" : "hidden",
      "& .M4LIcon-icon": {
        backgroundColor: o
      },
      variants: []
    };
  },
  /** Styles for the menu item label typography. */
  menuItemTypography: () => ({
    overflow: "hidden",
    textOverflow: "ellipsis",
    cursor: "inherit",
    paddingLeft: 0,
    paddingRight: 0
  }),
  /** Styles for the menu item description typography. */
  menuItemDescription: () => ({
    overflow: "hidden",
    textOverflow: "ellipsis",
    cursor: "inherit",
    paddingLeft: 0,
    paddingRight: 0
  }),
  /** Groups label and description in a vertical layout. */
  menuItemLabelWrapper: ({ theme: i }) => ({
    display: "flex",
    flexDirection: "column",
    gap: i.vars.size.baseSpacings["sp0-5"],
    minWidth: 0,
    alignItems: "flex-start"
  }),
  /** Adds spacing only when the start adornment is an Image component. */
  startAdornmentImageWrapper: ({ theme: i, ownerState: r }) => ({
    marginRight: i.vars.size.baseSpacings["sp0-5"],
    display: "inline-flex",
    ...e(
      i,
      r?.size || "medium",
      "container",
      (o) => ({
        maxWidth: o,
        maxHeight: o
      })
    ),
    ...e(
      i,
      r?.size || "medium",
      "base",
      (o) => ({
        minWidth: o,
        minHeight: o,
        height: "fit-content",
        width: "fit-content"
      })
    )
  }),
  /** Adds spacing only when the end adornment is an Image component. */
  endAdornmentImageWrapper: ({ theme: i, ownerState: r }) => ({
    marginLeft: i.vars.size.baseSpacings["sp0-5"],
    display: "inline-flex",
    ...e(
      i,
      r?.size || "medium",
      "container",
      (o) => ({
        maxWidth: o,
        maxHeight: o
      })
    ),
    ...e(
      i,
      r?.size || "medium",
      "base",
      (o) => ({
        minWidth: o,
        minHeight: o,
        height: "fit-content",
        width: "fit-content"
      })
    )
  }),
  /**
   * Styles for the skeleton menu item container.
   */
  skeletonMenuItem: ({ theme: i, ownerState: r }) => ({
    "&&&": {
      width: "100%",
      padding: i.vars.size.baseSpacings.sp2,
      borderRadius: i.vars.size.borderRadius["r1-5"],
      display: "flex",
      alignItems: "center",
      background: `${i.vars.palette.skeleton.default} !important`,
      ...e(
        i,
        r?.size || "medium",
        "action"
      )
    }
  })
};
export {
  l as menuItemStyles
};
