import { MENUITEM_CLASSES as o } from "../extended/mui/MenuItem/constants.js";
import { getTypographyStyles as n } from "../../utils/getTypographyStyles.js";
const c = {
  /**
   * Keep the field wrapper full-width so the visible input owns the anchor.
   */
  root: () => ({
    display: "inline-flex",
    width: "100%"
  }),
  /**
   * Align the user-provided adornment and the open button in a single row.
   */
  endAdornment: ({ theme: e }) => ({
    alignItems: "center",
    display: "inline-flex",
    gap: e.vars.size.baseSpacings.sp1
  }),
  /**
   * Size the popover for either the compact or desktop two-column layout.
   */
  popover: ({ theme: e, ownerState: t }) => {
    const a = t;
    return {
      "& .MuiPaper-root": {
        borderRadius: e.vars.size.borderRadius.r2,
        boxShadow: e.vars.customShadows.z4,
        display: "flex",
        flexDirection: "column",
        maxHeight: a?.compact ? "calc(100dvh - 32px)" : "calc(100dvh - 48px)",
        maxWidth: a?.compact ? "min(260px, calc(100vw - 32px))" : "min(960px, calc(100vw - 48px))",
        overflow: "hidden",
        padding: e.vars.size.baseSpacings.sp3
      }
    };
  },
  /**
   * Stack the summary, body, and footer inside the picker surface.
   */
  content: ({ theme: e, ownerState: t }) => ({
    alignItems: t?.compact ? "center" : "stretch",
    display: "flex",
    flex: "1 1 auto",
    flexDirection: "column",
    gap: e.vars.size.baseSpacings.sp3,
    maxHeight: "100%",
    minHeight: 0,
    width: "100%"
  }),
  /**
   * Keep the summary and interactive editor inside the only scrollable area of the popover.
   */
  scrollArea: ({ theme: e }) => ({
    boxSizing: "border-box",
    display: "flex",
    flex: "1 1 auto",
    flexDirection: "column",
    gap: e.vars.size.baseSpacings.sp3,
    minHeight: 0,
    overflowY: "auto",
    overscrollBehavior: "contain",
    WebkitOverflowScrolling: "touch",
    width: "100%",
    "& > *": {
      boxSizing: "border-box",
      paddingInlineEnd: e.vars.size.baseSpacings.sp1,
      width: "100%"
    }
  }),
  /**
   * Highlight the current draft summary above the interactive editor.
   */
  summary: ({ theme: e, ownerState: t }) => {
    const a = t;
    return {
      alignItems: a?.compact ? "center" : "baseline",
      color: e.vars.palette.primary.semanticText,
      columnGap: a?.compact ? 0 : e.vars.size.baseSpacings.sp1,
      display: "flex",
      flexDirection: a?.compact ? "column" : "row",
      fontWeight: e.vars.size.typography.weight.bold700,
      fontVariantNumeric: "tabular-nums",
      justifyContent: a?.compact ? "center" : "flex-end",
      rowGap: a?.compact ? e.vars.size.baseSpacings["sp0-5"] : 0,
      textAlign: a?.compact ? "center" : "end",
      width: "100%",
      paddingBottom: t?.compact ? 0 : e.vars.size.baseSpacings["sp2-5"]
    };
  },
  /**
   * Keep the desktop summary separator subtle and hide it from the stacked compact summary.
   */
  summarySeparator: ({ theme: e, ownerState: t }) => {
    const a = t;
    return {
      color: e.vars.palette.primary.semanticText,
      display: a?.compact ? "none" : "inline-flex",
      flexShrink: 0,
      opacity: 0.72
    };
  },
  /**
   * Keep each summary boundary on a stable line with tabular numerals.
   */
  summaryValue: ({ ownerState: e }) => {
    const t = e;
    return {
      display: "inline-flex",
      justifyContent: t?.compact ? "center" : "flex-end",
      textAlign: t?.compact ? "center" : "end",
      whiteSpace: "nowrap"
    };
  },
  /**
   * Switch between the desktop two-column body and the compact stacked body.
   */
  body: ({ theme: e, ownerState: t }) => {
    const a = t;
    return {
      columnGap: e.vars.size.baseSpacings.sp3,
      display: "grid",
      gridTemplateColumns: a?.compact ? "1fr" : "150px minmax(0, 1fr)",
      justifyItems: a?.compact ? "center" : "stretch",
      rowGap: e.vars.size.baseSpacings.sp4,
      width: "100%"
    };
  },
  /**
   * Keep desktop shortcuts as a vertical rail and collapse compact/mobile shortcuts into a scroller row.
   */
  shortcuts: ({ theme: e, ownerState: t }) => {
    const r = !!t?.compact;
    return {
      alignItems: "stretch",
      borderColor: `${e.vars.palette.border.disabled}!important`,
      borderRight: r ? "none" : e.vars.size.borderStroke.container,
      display: "flex",
      flexDirection: r ? "row" : "column",
      flexWrap: "nowrap",
      gap: e.vars.size.baseSpacings["sp1-5"],
      justifyContent: "flex-start",
      minWidth: 0,
      overflowX: r ? "auto" : "visible",
      paddingRight: r ? 0 : e.vars.size.baseSpacings.sp1,
      scrollbarWidth: "auto",
      WebkitOverflowScrolling: "touch",
      width: "100%"
      // ...(isCompact
      //   ? {
      //       '&::-webkit-scrollbar': {
      //         display: 'none',
      //       },
      //     }
      //   : {}),
    };
  },
  /**
   * Stretch desktop shortcuts to the rail width and let compact/mobile shortcuts size to content.
   */
  shortcutItem: ({ ownerState: e, theme: t }) => {
    const r = !!e?.compact;
    return {
      alignItems: "flex-start",
      flexShrink: r ? 0 : 1,
      justifyContent: r ? "center" : "flex-start",
      maxWidth: r ? "fit-content" : "100%",
      whiteSpace: "normal",
      width: r ? "fit-content" : "100%",
      [`& .${o.menuItemLabelWrapper}`]: {
        width: "100%",
        "& .M4LTypography-root": {
          ...n(
            t.generalSettings.isMobile,
            e?.size || "medium",
            "bodySlim"
          )
        }
      },
      [`& .${o.menuItemLabelWrapper} .M4LTypography-root:not(.${o.menuItemDescription})`]: {
        WebkitBoxOrient: "vertical",
        WebkitLineClamp: 3,
        display: "-webkit-box",
        overflow: "hidden",
        overflowWrap: "anywhere",
        textOverflow: "ellipsis",
        whiteSpace: "normal",
        wordBreak: "break-word"
      }
    };
  },
  /**
   * Keep the composed calendar engine constrained inside the picker surface.
   */
  calendar: () => ({
    display: "flex",
    justifyContent: "center",
    minWidth: 0,
    width: "100%"
  }),
  /**
   * Keep desktop actions right-aligned and center the compact/mobile footer.
   */
  footer: ({ theme: e, ownerState: t }) => {
    const a = t;
    return {
      alignItems: a?.compact ? "center" : "flex-end",
      flexShrink: 0,
      flexDirection: a?.compact ? "column" : "row",
      gap: a?.compact ? e.vars.size.baseSpacings.sp4 : e.vars.size.baseSpacings.sp3,
      justifyContent: a?.compact ? "center" : "flex-end",
      width: "100%"
    };
  },
  /**
   * Keep the live range summary pinned to the start of the footer actions row.
   */
  selectedDays: ({ ownerState: e }) => {
    const t = e;
    return {
      marginRight: t?.compact ? 0 : "auto",
      textAlign: t?.compact ? "center" : "start",
      width: t?.compact ? "100%" : "auto"
    };
  },
  /**
   * Keep the compact/mobile actions in a centered row while desktop actions stay grouped on the right.
   */
  footerActions: ({ theme: e, ownerState: t }) => {
    const a = t;
    return {
      alignItems: "center",
      columnGap: e.vars.size.baseSpacings.sp3,
      display: "flex",
      flexDirection: "row",
      flexWrap: "nowrap",
      justifyContent: a?.compact ? "center" : "flex-end",
      maxWidth: "100%",
      rowGap: e.vars.size.baseSpacings.sp1,
      width: a?.compact ? "100%" : "auto"
    };
  },
  actionCancel: () => ({}),
  actionIntro: () => ({})
};
export {
  c as dateTimeRangePickerStyles
};
