const o = {
  /**
   * Estilos para el root
   */
  root: ({ theme: i }) => ({
    display: "flex",
    height: "100%",
    gap: i.vars.size.baseSpacings.sp2
  }),
  /**
   * Estilos para el splitMaster
   */
  splitMaster: () => ({
    position: "relative",
    width: "100%",
    height: "100%",
    display: "flex",
    // flexDirection: 'column',
    overflow: "hidden",
    "& .M4LStack-root": {
      gap: "8px"
    }
    // ...(ownerState?.splitPosition === 'vertical' && {
    //   width: '100%',
    // }),
    // ...(ownerState?.splitPosition === 'horizontal' && {
    //   height: '100%',
    // }),
  }),
  /**
   * Estilos para el splitDetail
   */
  splitDetail: ({ ownerState: i }) => ({
    position: "relative",
    width: "100%",
    height: "100%",
    display: "flex",
    ...i?.splitPosition === "none" && {
      display: "none"
      //Garantiza que no se muestre el splitDetail cuando el splitPosition es none
    },
    flexDirection: "column",
    justifyContent: "center",
    alignItems: "center",
    overflow: "hidden",
    left: "0px",
    right: "0px",
    top: "0px",
    bottom: "0px",
    "& .M4LStack-root": {
      overflow: "hidden"
    }
  }),
  /**
   * Estilos para el splitResizeHandle
   */
  splitResizeHandle: ({ theme: i, ownerState: a }) => ({
    position: "relative",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    ...a?.splitPosition === "none" && {
      display: "none"
      //Garantiza que no se muestre el splitResizeHandle cuando el splitPosition es none
    },
    "&.M4LSplitLayout-splitResizeHandle-horizontal": {
      width: i.vars.size.baseSpacings.sp3,
      margin: "1px 0px",
      transition: "all 0.2s ease",
      "& .M4LIcon-root": {
        opacity: 0,
        zIndex: "1",
        transform: "rotate(45deg)",
        width: i.vars.size.baseSpacings.sp5,
        height: i.vars.size.baseSpacings.sp5,
        backgroundColor: i.vars.palette.background.default,
        borderRadius: "50%",
        transition: "all 0.2s ease",
        "& .M4LIcon-icon": {
          backgroundColor: i.vars.palette.primary.focusVisible,
          transition: "all 0.2s ease"
        }
      },
      "&:after": {
        content: '""',
        zIndex: "0",
        width: "2px",
        boxShadow: `inset 1px 0px 0px 0px ${i.vars.palette.border.disabled}`,
        position: "absolute",
        height: "100%",
        left: "50%",
        transition: "all 0.2s ease"
      }
    },
    "&.M4LSplitLayout-splitResizeHandle-vertical": {
      position: "relative",
      // asegúrate de que sea el contenedor para posicionar bien los pseudo-elementos
      height: i.vars.size.baseSpacings.sp3,
      "& .M4LIcon-root": {
        transition: "all 0.2s ease",
        opacity: 0,
        zIndex: "1",
        width: i.vars.size.baseSpacings.sp5,
        height: i.vars.size.baseSpacings.sp5,
        borderRadius: "50%",
        backgroundColor: i.vars.palette.background.default,
        "& .M4LIcon-icon": {
          backgroundColor: i.vars.palette.primary.focusVisible
        }
      },
      "&::after": {
        content: '""',
        zIndex: "0",
        height: "2px",
        boxShadow: `inset 0px 1px 0px 0px ${i.vars.palette.border.disabled}`,
        position: "absolute",
        width: "100%",
        top: "50%",
        transition: "all 0.2s ease"
      }
    },
    // Aquí controlas ambos con hover del root
    "&:hover": {
      "& .M4LIcon-root": {
        opacity: 1,
        transition: "all 0.2s ease",
        "& .M4LIcon-icon": {
          backgroundColor: i.vars.palette.border.dens
        }
      }
    },
    "&:active": {
      "& .M4LIcon-root": {
        opacity: 1,
        transition: "all 0.2s ease",
        "& .M4LIcon-icon": {
          backgroundColor: `${i.vars.palette.primary.focusVisible}!important`
        }
      }
    }
    /* '&:active, &:hover': {
      '& .M4LIcon-root': {
        opacity: 1,
        transition: 'all 0.2s ease',
      },
      '&.M4LSplitLayout-splitResizeHandle-vertical': {
        '&:after': {
          boxShadow: `inset 0px 1px 0px 0px ${theme.vars.palette.primary.focusVisible}`,
          transition: 'all 0.2s ease',
        },
      },
      '&.M4LSplitLayout-splitResizeHandle-horizontal': {
        '&:after': {
          boxShadow: `inset 1px 0px 0px 0px ${theme.vars.palette.primary.focusVisible}`,
          transition: 'all 0.2s ease',
        },
      },
    }, */
  }),
  splitResizeHandleIcon: {}
};
export {
  o as splitLayoutStyles
};
