import { getSizeStyles as r } from "../../../../utils/getSizeStyles/getSizeStyles.js";
import { MENUITEM_CLASSES as a } from "../../../extended/mui/MenuItem/constants.js";
import { AREAS_MENU_MAX_VISIBLE_ITEMS as d } from "./constants.js";
const b = {
  /**
   * Root Areas admin styles.
   */
  root: ({ theme: e, ownerState: i }) => ({
    alignItems: "center",
    display: "flex",
    ...i?.orientation === "vertical" ? {
      flexDirection: "column",
      gap: e.vars.size.baseSpacings.sp4,
      height: "100%",
      width: "100%"
    } : {
      flexDirection: "row",
      gap: e.vars.size.baseSpacings.sp3,
      width: "100%"
    }
  }),
  /**
   * Inner Areas admin layout styles.
   */
  areasAdminContent: ({ theme: e, ownerState: i }) => ({
    alignItems: "center",
    display: "flex",
    ...i?.orientation === "vertical" ? {
      flex: 1,
      flexDirection: "column",
      gap: e.vars.size.baseSpacings.sp2,
      justifyContent: "flex-start",
      width: "100%"
    } : {
      flexDirection: "row",
      gap: e.vars.size.baseSpacings["sp1-5"],
      width: "100%"
    }
  }),
  /**
   * Legacy trigger wrapper styles retained for slot compatibility.
   */
  areasTrigger: ({ ownerState: e }) => ({
    display: "flex",
    justifyContent: e?.orientation === "vertical" ? "center" : "flex-start",
    width: e?.orientation === "vertical" ? "100%" : "fit-content"
  }),
  /**
   * Areas-menu trigger button styles.
   */
  areasTriggerButton: {},
  /**
   * Shared divider spacing used by the vertical AreasAdmin rail.
   */
  sectionDivider: ({ theme: e }) => ({
    "&&": {
      alignSelf: "stretch",
      flexShrink: 0,
      height: "auto",
      minHeight: 0,
      padding: e.vars.size.baseSpacings["sp1-5"],
      width: e.vars.size.baseSpacings.sp4,
      margin: "0 auto"
    }
  }),
  /**
   * Areas-menu content wrapper that keeps the footer outside the scroll body.
   */
  areasMenuContent: ({ theme: e }) => ({
    display: "flex",
    flexDirection: "column",
    gap: e.vars.size.baseSpacings.sp1,
    "& > .M4LAreasAdmin-areasMenuFooter": {
      paddingLeft: e.vars.size.baseSpacings.sp4,
      paddingRight: e.vars.size.baseSpacings.sp4
    }
  }),
  /**
   * Scrollable region that keeps the approved visible-items cap local to AreasAdmin.
   */
  areasMenuScrollArea: ({ theme: e, ownerState: i }) => {
    const o = i?.size === "small" ? "small" : "medium", t = e.generalSettings.isMobile ? "mobile" : "desktop", l = e.vars.size[t][o].box, p = e.vars.size.baseSpacings.sp1, s = e.vars.size.baseSpacings.sp1, n = Number(
      i?.maxVisibleItems ?? d
    );
    return {
      overflowX: "hidden",
      overflowY: "auto",
      padding: s,
      maxHeight: `calc((${l} * ${n}) + (${p} * ${n - 1}) + (${s} * 2))`,
      "& .M4LMenuItem-root .M4LTypography-root": {
        width: "100%",
        // -webkit-line-clamp only truncates when the element is a -webkit-box;
        // without display + box-orient the clamp is ignored and the text expands.
        display: "-webkit-box",
        WebkitBoxOrient: "vertical",
        WebkitLineClamp: 2,
        overflow: "hidden",
        // normal wrapping lets the clamp count lines; break-spaces keeps long
        // tokens from overflowing horizontally.
        whiteSpace: "normal",
        overflowWrap: "anywhere"
      }
    };
  },
  /**
   * Local menu-list styling that mirrors the approved spacing and text wrapping.
   */
  areasMenuList: ({ theme: e }) => ({
    paddingTop: e.vars.size.baseSpacings.sp3,
    paddingBottom: e.vars.size.baseSpacings.sp3,
    display: "flex",
    flexDirection: "column",
    gap: e.vars.size.baseSpacings.sp1,
    [`& .${a.menuItemTypography}`]: {
      display: "-webkit-box",
      WebkitBoxOrient: "vertical",
      WebkitLineClamp: 3,
      whiteSpace: "normal",
      overflow: "hidden",
      overflowWrap: "anywhere"
    }
  }),
  /**
   * Footer action inside the areas menu.
   */
  areasMenuFooter: ({ theme: e }) => ({
    display: "flex",
    paddingTop: e.vars.size.baseSpacings.sp2,
    width: "100%"
  }),
  /**
   * Inline actions rendered inside the selected areas menu item.
   */
  areaMenuItemActions: ({ theme: e }) => ({
    alignItems: "center",
    display: "flex",
    gap: e.vars.size.baseSpacings.sp1,
    marginLeft: "auto"
  }),
  /**
   * Icon button styles for the area edit/delete actions.
   */
  areaMenuActionButton: ({ theme: e }) => ({
    "&&&": {
      borderRadius: e.vars.size.borderRadius.r1,
      minHeight: "auto",
      minWidth: "auto",
      padding: e.vars.size.baseSpacings["sp0-5"],
      "& .M4LIcon-icon": {
        backgroundColor: `${e.vars.palette.text.secondary} !important`
      }
    }
  }),
  /**
   * Container styles for the module-switching section.
   */
  containerModulesRoot: ({ theme: e, ownerState: i }) => ({
    alignItems: "center",
    backgroundColor: e.vars.palette.background.default,
    borderRadius: e.vars.size.borderRadius.r2,
    display: "flex",
    padding: e.vars.size.baseSpacings.sp1,
    border: e.vars.size.borderStroke.container,
    borderColor: e.vars.palette.border.disabled,
    boxShadow: e.vars.customShadows.z1,
    "&&& .M4LAreasAdmin-sectionDivider": {
      padding: e.vars.size.baseSpacings["sp0-5"]
    },
    ...i?.orientation === "vertical" ? {
      flexDirection: "column",
      gap: e.vars.size.baseSpacings.sp2,
      width: "100%"
    } : {
      flexDirection: "row",
      gap: e.vars.size.baseSpacings.sp2
    }
  }),
  /**
   * Visible module items layout.
   */
  containerModulesItems: ({ theme: e, ownerState: i }) => ({
    alignItems: "center",
    display: "flex",
    ...i?.orientation === "vertical" ? {
      flexDirection: "column",
      gap: e.vars.size.baseSpacings["sp1-5"],
      width: "100%"
    } : {
      flexDirection: "row",
      gap: e.vars.size.baseSpacings["sp1-5"]
    }
  }),
  /**
   * Legacy overflow wrapper styles retained for slot compatibility.
   */
  containerModulesOverflow: ({ ownerState: e }) => ({
    display: "flex",
    justifyContent: "center",
    width: e?.orientation === "vertical" ? "100%" : "fit-content"
  }),
  /**
   * Overflow trigger button styles.
   */
  containerModulesOverflowButton: ({ theme: e }) => ({
    ...r(e, "medium", "base", (i) => ({
      width: "inherit",
      height: `${i}px!important`
    }))
  }),
  /**
   * Module-menu content wrapper with local hover-reveal affordances.
   */
  containerModulesMenuContent: ({ theme: e }) => ({
    display: "flex",
    flexDirection: "column",
    gap: e.vars.size.baseSpacings.sp4,
    [`& .${a.root}:hover .M4LAreasAdmin-containerModulesMenuEndAdornment, & .${a.root}.Mui-focusVisible .M4LAreasAdmin-containerModulesMenuEndAdornment, & .${a.root}:focus-visible .M4LAreasAdmin-containerModulesMenuEndAdornment`]: {
      opacity: 1
    }
  }),
  /**
   * Module-menu header layout.
   */
  containerModulesMenuHeader: ({ theme: e }) => ({
    alignItems: "center",
    display: "flex",
    gap: e.vars.size.baseSpacings.sp2,
    justifyContent: "space-between",
    paddingInline: e.vars.size.baseSpacings.sp2
  }),
  /**
   * Module-menu header title styling.
   */
  containerModulesMenuHeaderTitle: ({ theme: e }) => ({
    color: e.vars.palette.text.primary,
    fontWeight: e.vars.size.typography.weight.bold700,
    minWidth: 0
  }),
  /**
   * Module-menu total-count chip wrapper.
   */
  containerModulesMenuHeaderCount: () => ({
    flexShrink: 0
  }),
  /**
   * Hover-revealed end-adornment icon button used by module menu items.
   */
  containerModulesMenuEndAdornment: () => ({
    alignItems: "center",
    display: "flex",
    flexShrink: 0,
    marginLeft: "auto",
    opacity: 0,
    pointerEvents: "none",
    transition: "opacity 0.2s ease"
  }),
  /**
   * Styles for visible module icon buttons.
   */
  moduleIconButton: {},
  /**
   * Legacy root container admin windows styles kept for compatibility.
   */
  containerAdminWindows: ({ theme: e }) => ({
    alignItems: "center",
    display: "flex",
    flexDirection: "row",
    gap: e.vars.size.baseSpacings.sp2
  }),
  areaContainerChipIcon: () => ({
    width: "100%"
  }),
  /**
   * Legacy desktop chip container retained for compatibility with older slots.
   */
  areaContainerContentChips: ({ theme: e }) => ({
    alignItems: "center",
    display: "flex",
    flexDirection: "row",
    gap: e.vars.size.baseSpacings["sp2-5"]
  }),
  /**
   * Legacy desktop chip list wrapper retained for compatibility.
   */
  areaContentChip: ({ theme: e }) => ({
    alignItems: "center",
    display: "flex",
    flexDirection: "row",
    gap: e.vars.size.baseSpacings.sp1,
    height: "100%",
    overflow: "auto hidden"
  }),
  /**
   * Legacy area-chip root layout retained for compatibility.
   */
  areaChipRoot: () => ({
    display: "flex",
    flexDirection: "row",
    maxWidth: "fit-content",
    width: "fit-content"
  }),
  /**
   * Legacy inline edit-button wrapper for selected area chips.
   */
  areaContainerChipEditButton: ({ theme: e }) => ({
    display: "flex",
    flexDirection: "row",
    "& .M4LIcon-icon": {
      backgroundColor: `${e.vars.palette.primary.contrastText} !important`
    }
  }),
  /**
   * Legacy desktop area chip styles.
   */
  chipAreas: ({ theme: e, ownerState: i }) => ({
    borderRadius: e.vars.size.borderRadius.r1,
    ...r(e, i?.size || "small", "action"),
    "&:hover > .M4LAreasAdmin-menuActionsChip": {
      opacity: 1,
      pointerEvents: "auto"
    },
    "& .M4LIcon-icon": {
      backgroundColor: i?.isAreaSelected ? `${e.vars.palette.primary.contrastText} !important` : `${e.vars.palette.text.secondary} !important`
    }
  }),
  /**
   * Legacy add-area trigger slot retained for compatibility.
   */
  iconButtonAddArea: {},
  /**
   * Legacy chip overflow menu styles retained for compatibility.
   */
  menuActionsChip: () => ({
    opacity: 0,
    pointerEvents: "none"
  }),
  /**
   * Mobile area-chip row layout.
   */
  areaChipMobileRoot: ({ theme: e }) => ({
    alignItems: "center",
    display: "flex",
    flexDirection: "row",
    gap: e.vars.size.baseSpacings.sp1
  }),
  /**
   * Mobile chip container layout.
   */
  chipMobileRoot: ({ theme: e }) => ({
    alignItems: "center",
    display: "flex",
    flexDirection: "row",
    gap: e.vars.size.baseSpacings.sp1
  }),
  /**
   * Mobile chip content alignment and shape.
   */
  chipMobileContent: ({ theme: e }) => ({
    alignItems: "center",
    borderRadius: e.vars.size.borderRadius.r1,
    display: "flex",
    flexDirection: "row"
  }),
  nameChipMobile: ({ theme: e }) => ({
    padding: e.vars.size.baseSpacings.sp1
  }),
  /**
   * Mobile add-area column wrapper.
   */
  addAreasMobileContainer: () => ({
    display: "flex",
    flexDirection: "column"
  }),
  /**
   * Mobile chip action menu layout.
   */
  menuActionsAreaChipMobile: ({ theme: e }) => ({
    alignContent: "center",
    alignItems: "center",
    borderRadius: e.vars.size.borderRadius.r1,
    display: "flex",
    flexDirection: "column",
    gap: e.vars.size.baseSpacings.sp1
  }),
  /**
   * Neutral full-width "add area" action rendered in the areas menu footer.
   */
  buttonAddArea: ({ theme: e }) => ({
    "&&": {
      backgroundColor: e.vars.palette.background.neutral,
      borderRadius: e.vars.size.borderRadius.r2,
      color: e.vars.palette.text.primary,
      gap: e.vars.size.baseSpacings.sp2,
      justifyContent: "center",
      width: "100%",
      "&:hover": {
        backgroundColor: e.vars.palette.background.hover
      },
      "& .M4LIcon-icon": {
        backgroundColor: `${e.vars.palette.text.primary} !important`
      }
    }
  }),
  /**
   * Inline edit-area form container styles.
   */
  editAreaChipContainer: ({ theme: e }) => ({
    borderRadius: e.vars.size.borderRadius.r1,
    display: "flex",
    flexDirection: "column"
  }),
  /**
   * Inline edit-area popover header spacing.
   */
  editAreaHeader: ({ theme: e }) => ({
    alignSelf: "stretch",
    display: "flex",
    flexDirection: "column",
    gap: e.vars.size.baseSpacings["sp0-5"],
    justifyContent: "center",
    paddingBottom: e.vars.size.baseSpacings.sp2
  }),
  /**
   * Mobile inline edit-area container styles.
   */
  editAreaChipMobileContainer: () => ({
    borderRadius: "inherit",
    display: "flex",
    flexDirection: "column",
    width: "100%"
  })
};
export {
  b as areasAdminStyles
};
