const t = (r, o) => {
  const e = {
    width: r.vars.size.baseSpacings.sp3,
    height: r.vars.size.baseSpacings.sp3,
    borderStyle: "solid",
    borderWidth: "1px",
    display: o?.disabled ? "none" : "block",
    borderColor: r.vars.palette.border.default,
    borderRadius: "0%",
    backgroundImage: "none",
    position: "absolute",
    boxSizing: "border-box",
    padding: "0 3px 3px 0",
    margin: "0px"
  };
  return {
    position: "absolute",
    backgroundColor: "#ffffff00",
    cursor: o?.disabled ? "default" : void 0,
    "&.react-resizable": {
      position: "relative",
      //propuesta de diseño con el resizable oculto
      "& .react-resizable-handle": {
        opacity: "0!important",
        zIndex: 1
      }
      /*  // Show handles only when not disabled and add resizing styles
      '&:hover:not(.react-resizable-hide) .react-resizable-handle': {
        display: ownerState?.disabled ? 'none' : 'block',
        prop1: 3,
      },
      '&.M4L-resizing .react-resizable-handle': {
        display: ownerState?.disabled ? 'none' : 'block',
        prop1: 2,
      }, */
    },
    // '&.react-resizable-hide > .react-resizable-handle': {
    //   display: 'none',
    //   prop1: 1,
    // },
    // Styles for each handle
    "& .react-resizable-handle-sw": {
      ...e,
      transform: "rotate(0deg)",
      bottom: "0",
      left: "0",
      borderTop: "none",
      borderRight: "none",
      cursor: "sw-resize"
    },
    "& .react-resizable-handle-se": {
      ...e,
      transform: "rotate(0deg)",
      bottom: "0",
      right: "0",
      borderTop: "none",
      borderLeft: "none",
      cursor: "se-resize"
    },
    "& .react-resizable-handle-nw": {
      ...e,
      transform: "rotate(0deg)",
      top: "0",
      left: "0",
      borderBottom: "none",
      borderRight: "none",
      cursor: "nw-resize"
    },
    "& .react-resizable-handle-ne": {
      ...e,
      transform: "rotate(0deg)",
      top: "0",
      right: "0",
      borderBottom: "none",
      borderLeft: "none",
      cursor: "ne-resize"
    },
    "& .react-resizable-handle-w": {
      ...e,
      top: "50%",
      left: "0",
      transform: "translateY(-50%) rotate(90deg)",
      borderTop: "none",
      borderLeft: "none",
      borderRight: "none",
      cursor: "ew-resize"
    },
    "& .react-resizable-handle-e": {
      ...e,
      top: "50%",
      right: "0",
      transform: "translateY(-50%) rotate(270deg)",
      borderTop: "none",
      borderLeft: "none",
      borderRight: "none",
      cursor: "ew-resize"
    },
    "& .react-resizable-handle-n": {
      ...e,
      top: "0",
      left: "50%",
      transform: "translateX(-50%) rotate(180deg)",
      borderTop: "none",
      borderLeft: "none",
      borderRight: "none",
      cursor: "ns-resize"
    },
    "& .react-resizable-handle-s": {
      ...e,
      bottom: "0",
      left: "50%",
      transform: "translateX(-50%) rotate(0deg)",
      borderTop: "none",
      borderLeft: "none",
      borderRight: "none",
      cursor: "ns-resize"
    }
  };
};
export {
  t as getReactResizableStyles
};
