const o = {
  /**
   * Styles for the root element of the popper component.
   */
  popperRoot: ({ theme: a, ownerState: s }) => ({
    position: "relative",
    display: "flex",
    backgroundColor: a.vars.palette.background.default,
    borderRadius: a.vars.size.borderRadius.r1,
    boxShadow: a.vars.shadows[3],
    ...s?.arrow && {
      // Top-Center
      '&[data-popper-placement="top"]': {
        "&.M4LPopperClass-root": {
          marginBottom: a.vars.size.baseSpacings.sp2 + "!important"
        },
        "&::before": {
          content: '""',
          position: "absolute",
          bottom: -12,
          left: "50%",
          transform: "translateX(-50%)",
          borderRadius: a.vars.size.baseSpacings.sp1,
          zIndex: -1,
          width: a.vars.size.baseSpacings.sp4,
          height: a.vars.size.baseSpacings.sp4,
          rotate: "45deg",
          boxShadow: a.vars.shadows[4],
          backgroundColor: a.vars.palette.background.default,
          clipPath: "polygon(100% 100%, 100% 0, 0 100%)"
        }
      },
      // Top-Start
      '&[data-popper-placement="top-start"]': {
        "&.M4LPopperClass-root": {
          marginBottom: a.vars.size.baseSpacings.sp2 + "!important"
        },
        "&::before": {
          content: '""',
          position: "absolute",
          bottom: -6,
          left: 10,
          borderRadius: a.vars.size.baseSpacings.sp1,
          zIndex: -1,
          width: a.vars.size.baseSpacings.sp4,
          height: a.vars.size.baseSpacings.sp4,
          rotate: "45deg",
          boxShadow: a.vars.shadows[4],
          backgroundColor: a.vars.palette.background.default,
          clipPath: "polygon(100% 100%, 100% 0, 0 100%)"
        }
      },
      // Top-End
      '&[data-popper-placement="top-end"]': {
        "&.M4LPopperClass-root": {
          marginBottom: a.vars.size.baseSpacings.sp2 + "!important"
        },
        "&::before": {
          content: '""',
          position: "absolute",
          bottom: -6,
          right: 10,
          borderRadius: a.vars.size.baseSpacings.sp1,
          zIndex: -1,
          width: a.vars.size.baseSpacings.sp4,
          height: a.vars.size.baseSpacings.sp4,
          rotate: "45deg",
          boxShadow: a.vars.shadows[4],
          backgroundColor: a.vars.palette.background.default,
          clipPath: "polygon(100% 100%, 100% 0, 0 100%)"
        }
      },
      // Bottom-Center
      '&[data-popper-placement="bottom"]': {
        "&.M4LPopperClass-root": {
          marginTop: a.vars.size.baseSpacings.sp2 + "!important"
        },
        "&::before": {
          content: '""',
          position: "absolute",
          top: 0,
          left: "50%",
          transform: "translateX(-50%)",
          borderRadius: a.vars.size.baseSpacings.sp1,
          zIndex: -1,
          width: a.vars.size.baseSpacings.sp4,
          height: a.vars.size.baseSpacings.sp4,
          rotate: "45deg",
          boxShadow: a.vars.shadows[4],
          backgroundColor: a.vars.palette.background.default,
          clipPath: "polygon(0 0, 100% 0, 0 100%)"
        }
      },
      // Bottom-Start
      '&[data-popper-placement="bottom-start"]': {
        "&.M4LPopperClass-root": {
          marginTop: a.vars.size.baseSpacings.sp2 + "!important"
        },
        "&::before": {
          content: '""',
          position: "absolute",
          top: -5,
          left: 10,
          borderRadius: a.vars.size.baseSpacings.sp1,
          zIndex: -1,
          width: a.vars.size.baseSpacings.sp4,
          height: a.vars.size.baseSpacings.sp4,
          rotate: "45deg",
          boxShadow: a.vars.shadows[4],
          backgroundColor: a.vars.palette.background.default,
          clipPath: "polygon(0 0, 100% 0, 0 100%)"
        }
      },
      // Bottom-End
      '&[data-popper-placement="bottom-end"]': {
        "&.M4LPopperClass-root": {
          marginTop: a.vars.size.baseSpacings.sp2 + "!important"
        },
        "&::before": {
          content: '""',
          position: "absolute",
          top: -5,
          right: 10,
          borderRadius: a.vars.size.baseSpacings.sp1,
          zIndex: -1,
          width: a.vars.size.baseSpacings.sp4,
          height: a.vars.size.baseSpacings.sp4,
          rotate: "45deg",
          boxShadow: a.vars.shadows[4],
          backgroundColor: a.vars.palette.background.default,
          clipPath: "polygon(0 0, 100% 0, 0 100%)"
        }
      },
      // Left-Center
      '&[data-popper-placement="left"]': {
        "&.M4LPopperClass-root": {
          marginRight: a.vars.size.baseSpacings.sp2 + "!important"
        },
        "&::before": {
          content: '""',
          position: "absolute",
          right: -0,
          top: "50%",
          transform: "translateY(-50%)",
          borderRadius: a.vars.size.baseSpacings.sp1,
          zIndex: -1,
          width: a.vars.size.baseSpacings.sp4,
          height: a.vars.size.baseSpacings.sp4,
          rotate: "45deg",
          boxShadow: a.vars.shadows[4],
          backgroundColor: a.vars.palette.background.default,
          clipPath: "polygon(0 0, 100% 100%, 100% 0)"
        }
      },
      // Left-Start
      '&[data-popper-placement="left-start"]': {
        "&.M4LPopperClass-root": {
          marginRight: a.vars.size.baseSpacings.sp2 + "!important"
        },
        "&::before": {
          content: '""',
          position: "absolute",
          right: -5,
          top: 10,
          borderRadius: a.vars.size.baseSpacings.sp1,
          zIndex: -1,
          width: a.vars.size.baseSpacings.sp4,
          height: a.vars.size.baseSpacings.sp4,
          rotate: "45deg",
          boxShadow: a.vars.shadows[4],
          backgroundColor: a.vars.palette.background.default,
          clipPath: "polygon(0 0, 100% 100%, 100% 0)"
        }
      },
      // Left-end
      '&[data-popper-placement="left-end"]': {
        "&.M4LPopperClass-root": {
          marginRight: a.vars.size.baseSpacings.sp2 + "!important"
        },
        "&::before": {
          content: '""',
          position: "absolute",
          right: -5,
          bottom: 10,
          borderRadius: a.vars.size.baseSpacings.sp1,
          zIndex: -1,
          width: a.vars.size.baseSpacings.sp4,
          height: a.vars.size.baseSpacings.sp4,
          rotate: "45deg",
          boxShadow: a.vars.shadows[4],
          backgroundColor: a.vars.palette.background.default,
          clipPath: "polygon(0 0, 100% 100%, 100% 0)"
        }
      },
      // Right-Center
      '&[data-popper-placement="right"]': {
        "&.M4LPopperClass-root": {
          marginLeft: a.vars.size.baseSpacings.sp2 + "!important"
        },
        "&::before": {
          content: '""',
          position: "absolute",
          left: -1,
          top: "50%",
          transform: "translateY(-50%)",
          borderRadius: a.vars.size.baseSpacings.sp1,
          zIndex: -1,
          width: a.vars.size.baseSpacings.sp4,
          height: a.vars.size.baseSpacings.sp4,
          rotate: "315deg",
          boxShadow: a.vars.shadows[4],
          backgroundColor: a.vars.palette.background.default,
          clipPath: "polygon(0 0, 100% 0, 0 100%)"
        }
      },
      // Right-Start
      '&[data-popper-placement="right-start"]': {
        "&.M4LPopperClass-root": {
          marginLeft: a.vars.size.baseSpacings.sp2 + "!important"
        },
        "&::before": {
          content: '""',
          position: "absolute",
          left: -6,
          top: 10,
          borderRadius: a.vars.size.baseSpacings.sp1,
          zIndex: -1,
          width: a.vars.size.baseSpacings.sp4,
          height: a.vars.size.baseSpacings.sp4,
          rotate: "315deg",
          boxShadow: a.vars.shadows[4],
          backgroundColor: a.vars.palette.background.default,
          clipPath: "polygon(0 0, 100% 0, 0 100%)"
        }
      },
      // Right-End
      '&[data-popper-placement="right-end"]': {
        "&.M4LPopperClass-root": {
          marginLeft: a.vars.size.baseSpacings.sp2 + "!important"
        },
        "&::before": {
          content: '""',
          position: "absolute",
          left: -6,
          bottom: 10,
          borderRadius: a.vars.size.baseSpacings.sp1,
          zIndex: -1,
          width: a.vars.size.baseSpacings.sp4,
          height: a.vars.size.baseSpacings.sp4,
          rotate: "315deg",
          boxShadow: a.vars.shadows[4],
          backgroundColor: a.vars.palette.background.default,
          clipPath: "polygon(0 0, 100% 0, 0 100%)"
        }
      }
    }
  })
};
export {
  o as popperStyles
};
