const r = {
  /**
   * Root container: flex layout for adornment + content.
   * When fillCell is true (image in table view), root fills the cell so image height: 90% scales with row height (same as ImageFormatter).
   * Gap: hasImage → Sp2 (8px), hasIcon → Sp1-5 (6px), otherwise Sp1.
   */
  root: ({ theme: e, ownerState: i }) => ({
    display: "flex",
    alignItems: "center",
    gap: i?.hasImage ? e.vars.size.baseSpacings.sp2 : i?.hasIcon ? e.vars.size.baseSpacings["sp1-5"] : e.vars.size.baseSpacings.sp1,
    width: "100%",
    minWidth: 0,
    ...i?.fillCell && {
      height: "100%"
    }
  }),
  /**
   * Wrapper for the start adornment (image or icon).
   * When hasImage is true, adornment stretches to cell height so image height: 90% resolves correctly.
   */
  adornment: (e) => ({
    display: "inline-flex",
    flexShrink: 0,
    ...e.ownerState?.hasImage && {
      alignSelf: "stretch",
      display: "flex",
      alignItems: "center"
    }
  }),
  /**
   * Image slot: same styles as ImageFormatter image slot for consistent look in table and cards.
   * When ownerState.hasDefinedSize is false: height 90%, width auto, aspectRatio 1/1 (scales with row height).
   * When true: fixed width/height (cards).
   */
  image: ({ theme: e, ownerState: i }) => ({
    flexShrink: 0,
    borderRadius: e.vars.size.borderRadius.r2,
    border: `1px solid ${e.vars.palette.border.disabled}`,
    ...!i?.hasDefinedSize && {
      height: "90%",
      width: "auto",
      aspectRatio: "1 / 1"
    },
    objectFit: i?.cover ? "cover" : "contain"
  }),
  /**
   * Icon slot when icon is used (wraps the Icon component).
   */
  icon: () => ({
    flexShrink: 0
  }),
  /**
   * Wrapper for the main content (value).
   * Uses multi-line ellipsis controlled by DataGrid density:
   * - compact     -> 1 line
   * - standard    -> 2 lines
   * - confortable -> 3 lines
   */
  content: ({ ownerState: e }) => ({
    flex: 1,
    minWidth: 0,
    display: "-webkit-box",
    WebkitBoxOrient: "vertical",
    WebkitLineClamp: e?.rowHeightVariant === "compact" ? 1 : e?.rowHeightVariant === "confortable" ? 3 : 2,
    overflow: "hidden",
    textOverflow: "ellipsis",
    wordBreak: "break-word",
    whiteSpace: "normal"
  }),
  /**
   * Button that looks like a link when onLink is set (no navigation, runs handler).
   * Same line-clamp as content; link-like appearance (primary color, underline on hover).
   */
  linkLikeButton: ({ theme: e, ownerState: i }) => ({
    flex: 1,
    minWidth: 0,
    display: "-webkit-box",
    WebkitBoxOrient: "vertical",
    WebkitLineClamp: i?.rowHeightVariant === "compact" ? 1 : i?.rowHeightVariant === "confortable" ? 3 : 2,
    overflow: "hidden",
    textOverflow: "ellipsis",
    wordBreak: "break-word",
    whiteSpace: "normal",
    margin: 0,
    padding: 0,
    border: "none",
    background: "transparent",
    font: "inherit",
    color: e.vars.palette.text.primary,
    cursor: "pointer",
    textAlign: "left",
    textDecoration: "none",
    "&:hover": {
      textDecoration: "underline",
      color: e.vars.palette.primary.hover
    },
    "&:focus-visible": {
      outline: "2px solid",
      outlineColor: e.vars.palette.primary.main,
      outlineOffset: 2
    }
  })
};
export {
  r as nestedFormatterStyles
};
