import { alpha as t } from "@mui/material";
import { getTypographyStyles as i } from "../../utils/getTypographyStyles.js";
import { getSizeStyles as o } from "../../utils/getSizeStyles/getSizeStyles.js";
const d = {
  /**
   * ***************************************************
   * Estilos para el contenedor principal del DataGrid.
   * ***************************************************
   */
  datagridRoot: ({ theme: r }) => ({
    display: "flex",
    flexDirection: "column",
    container: "container / inline-size",
    background: "transparent",
    borderRadius: r.vars.size.borderRadius.r1,
    position: "relative",
    gap: r.vars.size.baseSpacings.sp3,
    height: "100%",
    width: "100%",
    flex: 1,
    overflow: "hidden",
    "& .rdg .MuiCheckbox-root": {
      overflow: "visible",
      padding: 0,
      ...r.generalSettings.isMobile ? {
        width: r.vars.size.mobile.small.action,
        height: r.vars.size.mobile.small.action
      } : {
        width: r.vars.size.desktop.small.action,
        height: r.vars.size.desktop.small.action
      },
      display: "inline-flex",
      justifyContent: "center",
      alignItems: "center",
      borderRadius: r.size.borderRadius.r1,
      "&:hover": {
        backgroundColor: r.vars.palette.default.hoverOpacity
      },
      "&:active": {
        backgroundColor: r.vars.palette.default.activeOpacity
      },
      "&.Mui-checked": {
        "&:hover": {
          backgroundColor: r.vars.palette.primary.hoverOpacity,
          "& ..": {
            backgroundColor: r.vars.palette.primary.hover
          }
        },
        "&:active": {
          backgroundColor: r.vars.palette.primary.activeOpacity,
          "& .M4LIcon-icon": {
            backgroundColor: r.vars.palette.primary.active
          }
        }
      },
      "&.Mui-focusVisible, &:focus-visible": {
        outline: `1px solid ${r.vars.palette.primary.focusVisible}`
      },
      "& > svg": {
        color: r.vars.palette.text.secondary
      }
    },
    "&.M4LDataGrid-xs": {
      "& .M4LDataGrid-actions": {
        height: r.vars.size.baseSpacings.sp11,
        "& .M4LPager-labelRowsPerPageContainer": {
          "& .M4LTypography-root": {
            display: "none"
          }
        },
        "& .M4LPager-labelDisplayRows": {
          display: "block"
        }
      }
    },
    "& .M4LDataGrid-tableContaniner:not(.M4LDataGrid-withActions)": {
      top: `${r.vars.size.baseSpacings.sp0} !important`
    },
    "& .rdg-cell .M4lclassCssSpecificity": {
      fontWeight: 400
    },
    '& [role="row"]:last-of-type': {
      "& .rdg-cell": {
        boxShadow: `inset 0 0.5px 0 0 ${r.vars.palette?.border.secondary}, inset 0 -0.5px 0 0 ${r.vars.palette?.border.secondary}`
      }
    }
  }),
  customHeader: ({ ownerState: r }) => ({
    display: r?.visibleCustomHeader ? "block" : "none"
  }),
  /**
   * Estilos del contenedor de las acciones
   */
  actionsRoot: ({ theme: r }) => ({
    display: "flex",
    alignItems: "center",
    justifyContent: "space-between",
    background: "transparent",
    borderRadius: r.vars.size.borderRadius.r1,
    gap: r.vars.size.baseSpacings.sp1,
    height: "fit-content",
    ...r.generalSettings.isMobile && {
      minHeight: r.vars.size.baseSpacings.sp10
    },
    "& .mobile-menu-actions": {
      marginRight: "auto"
    }
  }),
  /**
   * Estilos para el contenedor de las acciones ezquierdo
   */
  containerLeftActions: ({ theme: r }) => ({
    display: "flex",
    flexDirection: "row",
    gap: r.vars.size.baseSpacings["sp0-5"],
    alignItems: "center",
    borderRadius: r.vars.size.borderRadius.r2,
    border: r.vars.size.borderStroke.container,
    borderColor: r.vars.palette?.border.disabled,
    padding: r.vars.size.baseSpacings.sp1,
    boxShadow: r.vars.customShadows?.z1
  }),
  /**
   * Estilos para el contenedor de las acciones derecho
   */
  containerRightActions: ({ theme: r }) => ({
    display: "flex",
    flexDirection: "row",
    gap: r.vars.size.baseSpacings["sp0-5"],
    alignItems: "center"
  }),
  /**
   *Estilos para el contenedor de la paginación y filas por página
   */
  controlNavigate: ({ theme: r }) => ({
    display: "flex",
    alignItems: "center",
    flexDirection: "row",
    gap: r.vars.size.baseSpacings.sp2,
    flexWrap: "wrap",
    height: "fit-content"
  }),
  /**
   * container de los botones de acciones
   */
  actionsConfigContainer: ({ theme: r }) => ({
    width: "100%",
    display: "flex",
    flexDirection: "row",
    justifyContent: "space-between",
    gap: r.vars.size.baseSpacings.sp3,
    alignItems: "center"
  }),
  /**
   * Estilos para el contenedor principal de RowsCount
   */
  rowsCountRoot: ({ theme: r }) => ({
    alignItems: "center",
    display: "flex",
    gap: r.vars.size.baseSpacings.sp2
  }),
  /**
   * Estilos para el label de RowsCount
   */
  rowsCountLabel: ({ theme: r, ownerState: e }) => ({
    color: r.vars.palette.text.primary,
    fontWeight: 400,
    height: "100%",
    lineHeight: r.vars.size.baseSpacings.sp4,
    fontSize: i(
      r.generalSettings.isMobile,
      e?.size || "medium",
      "bodyStandard"
    ).fontSize
  }),
  /**
   * Estilos para el valor de RowsCount
   */
  rowsCountValue: ({ theme: r, ownerState: e }) => ({
    background: r.vars.palette.background.default,
    borderRadius: r.vars.size.baseSpacings.sp1,
    paddingBottom: r.vars.size.baseSpacings["sp0-5"],
    paddingLeft: r.vars.size.baseSpacings.sp1,
    paddingRight: "6px",
    paddingTop: r.vars.size.baseSpacings.sp1,
    fontSize: i(
      r.generalSettings.isMobile,
      e?.size || "medium",
      "bodyStandard"
    ).fontSize
  }),
  /**
   * Estilos para el contenedor de las columnas
   * de la tabla del modal de configuración de columnas.
   */
  columnsConfigWrapper: ({ theme: r }) => ({
    color: r.vars.palette.text.primary,
    position: "relative",
    display: "flex",
    flexDirection: "column",
    height: "100%",
    width: "100%"
  }),
  /**
   * Estilos para la configuración
   * de selección de las columnas en
   * el modal de configuración de columnas.
   */
  columnsConfigSelColumns: ({ theme: r, ownerState: e }) => ({
    color: r.vars.palette.text.secondary,
    ...i(
      r.generalSettings.isMobile,
      e?.size || "medium",
      "bodyDens"
    )
  }),
  /**
   * Estilos para el contenedor de la tabla
   * en el modal de configuración de columnas.
   */
  columnsConfigDataGrid: ({ theme: r }) => ({
    position: "relative",
    display: "flex",
    flexDirection: "column",
    flexGrow: 1,
    overflow: "auto",
    gap: r.vars.size.baseSpacings.sp3
  }),
  /**
   * Estilos para el contenedor de los botones
   * de acción en el modal de configuración de columnas.
   */
  columnsConfigActios: ({ theme: r }) => ({
    paddingTop: r.vars.size.baseSpacings.sp4,
    paddingBottom: r.vars.size.baseSpacings.sp2,
    display: "flex",
    flexDirection: "row"
  }),
  /**
   * *****************************************
   * Estilos el el input editor del DataGrid.
   * *****************************************
   */
  inputTexEditor: ({ theme: r, ownerState: e }) => ({
    appearance: "none",
    boxSizing: "border-box",
    inlineSize: "100%",
    blockSize: "100%",
    paddingBlock: r.vars.size.baseSpacings.sp0,
    verticalAlign: "top",
    textAlign: "right",
    fontFamily: "inherit",
    background: "transparent",
    border: `1px solid ${r.vars.palette?.border.secondary}`,
    borderRadius: r.vars.size.borderRadius["r1-5"],
    ...o(r, e?.size || "medium", "case", (a) => ({
      height: a
    })),
    padding: r.vars.size.baseSpacings.sp1,
    outline: "none",
    "&:focus": {
      outline: "none",
      border: `1px solid ${r.vars.palette?.border.secondary}`,
      boxShadow: "none"
    },
    "&:hover": {
      outline: "none"
    },
    "&::placeholder": {
      opacity: "1"
    }
  }),
  /**
   * ****************************************
   * Estilos para los componetes Table
   * ****************************************
   */
  /**
   * Estilos para el contenedor principal
   * del componente Table.
   */
  tableContaniner: ({ theme: r }) => ({
    display: "flex",
    flexDirection: "column",
    position: "relative",
    flexGrow: 1,
    overflow: "hidden",
    borderRadius: r.vars.size.baseSpacings.sp1,
    border: "none",
    boxshadow: r.customShadows?.z2,
    background: r.vars.palette.background.default,
    "@container main (max-width: 600px)": {
      top: r.vars.size.baseSpacings.sp11
    }
  }),
  /**
   * Estilos para el contenedor del dataGrid
   */
  tableWrapperDataGrid: ({ theme: r, ownerState: e }) => ({
    position: "relative",
    height: "100%",
    overflow: "hidden",
    borderRadius: r.vars.size.borderRadius.r2,
    border: r.vars.size.borderStroke.container,
    borderColor: r.vars.palette?.border.secondary,
    "& .rdg ": {
      scrollBehavior: "smooth",
      display: "grid",
      contain: "content",
      boxSizing: "border-box",
      border: "none",
      background: r.vars.palette.background.default,
      gridColumnGap: r.vars.size.baseSpacings.sp0,
      gridRowGap: r.vars.size.baseSpacings.sp0,
      userSelect: "initial",
      height: "100%",
      contentVisibility: "unset",
      overflow: "auto",
      padding: r.vars.size.baseSpacings.sp0,
      "--rdg-grid-inline-size": r.vars.size.baseSpacings.sp0,
      "--rdg-header-background-color": r.vars.palette.primary.opacity,
      "--rdg-row-selected-background-color": r.vars.palette.primary.opacity,
      "--rdg-row-hover-background-color": r.vars.palette.primary.opacity,
      "--rdg-background-color": r.vars.palette.background.default,
      "--rdg-selection-color": r.vars.palette.primary.focusVisible,
      "--row-selected-hover-background-color": r.vars.palette.primary.toneOpacity,
      "--rdg-checkbox-color": r.vars.palette.primary.enabled,
      "--rdg-checkbox-focus-color": t(
        r.colorSchemes.finalTheme.palette.primary.enabled,
        r.colorSchemes.finalTheme.palette.action.selectedOpacity
      ),
      "--rdg-row-header-height": "var(--rdg-row-height)",
      "--rdg-border-color": "none",
      "&:last-child .rdg-cell": {
        border: "unset!important",
        boxShadow: `inset 0 0.5px 0 0 ${r.vars.palette?.border.secondary}`
      }
    },
    "&.MeasuringCell": {
      contain: "strict",
      gridRow: "1",
      visibility: "hidden"
    },
    "&::before": {
      content: "''",
      gridColumn: "1/-1",
      gridRow: "1/-1"
    },
    '& [role="row"], & .rdg-row, & .rdg-header-row, & .rdg-summary-row': {
      display: "contents"
    },
    '& [role="columnheader"]': {
      paddingTop: r.vars.size.baseSpacings.sp2,
      paddingBottom: r.vars.size.baseSpacings.sp2,
      "& .MuiInputBase-input": {
        ...i(
          r.generalSettings.isMobile,
          e?.size || "medium",
          "bodyStandard"
        )
      }
    },
    '& [role="grid"]': {
      '& [aria-rowindex="1"].rdg-row .rdg-cell:last-child': {
        borderTopRightRadius: r.vars.size.baseSpacings.sp3
      },
      '& [aria-rowindex="2"].rdg-row .rdg-cell': {
        boxShadow: "unset"
      }
    },
    "& .rdg-row": {
      display: "contents",
      '&[aria-selected="true"]': {
        backgroundColor: r.vars.palette.primary.toneOpacity,
        "&:hover": {
          backgroundColor: r.vars.palette.primary.toneOpacity
        }
      },
      "& .rdg-cell": {
        backgroundColor: r.vars.palette.background.default
      },
      '&[aria-selected="false"] .rdg-cell': {
        backgroundColor: r.vars.palette.background.default
      },
      "&:nth-of-type(odd)": {
        "& .rdg-cell": {
          backgroundColor: r.vars.palette.background.default
        }
      },
      '&[aria-selected="true"] .rdg-cell': {
        backgroundColor: r.vars.palette.primary?.toneOpacity
      },
      "&:hover": {
        "& .rdg-cell": {
          backgroundColor: `${r.vars.palette.default.toneOpacity} !important`,
          transition: "background-color 0.1s linear"
        }
      },
      backgroundColor: "transparent"
    },
    "& .rdg-cell": {
      overflow: "clip",
      position: "sticky",
      outline: "none",
      color: r.vars.palette.text.primary,
      paddingBlock: 0,
      paddingInline: "8px",
      borderInlineEnd: "1px solid var(--rdg-border-color)",
      borderBlockEnd: "1px solid var(--rdg-border-color)",
      gridRowStart: "var(--rdg-grid-row-start)",
      alignContent: "center",
      backgroundColor: "inherit",
      whiteSpace: "nowrap",
      textOverflow: "ellipsis",
      ...i(
        r.generalSettings.isMobile,
        e?.size || "medium",
        "bodyStandard"
      ),
      lineHeight: "var(--rdg-row-height)!important",
      '&[aria-selected="true"]': {},
      "&:has(> .MuiCheckbox-root)": {
        overflow: "visible",
        paddingInline: 0
      },
      "& .checkbox-checked": {
        "& .M4LIcon-icon": {
          backgroundColor: r.vars.palette.primary.enabled
        }
      },
      "& .checkbox-unChecked": {
        "& .M4LIcon-icon": {
          backgroundColor: r.vars.palette.text.primary
        }
      },
      "& .rdg-text-editor": {
        textAlign: "inherit",
        color: r.vars.palette.text.secondary,
        padding: `${r.vars.size.baseSpacings.sp0} ${r.vars.size.baseSpacings.sp2}`,
        border: r.vars.size.baseSpacings.sp0,
        borderTop: "0.5px solid",
        borderBottom: r.vars.size.borderStroke.container,
        borderLeft: "0.5px solid",
        borderRight: "0.5px solid",
        borderColor: `${r.vars.palette?.border.disabled} !important`,
        ...r.colorSchemes.finalTheme.typography.body
      },
      "&:has(> .M4LRadio-root)": {
        overflow: "visible",
        paddingInline: 0
      },
      "&.rdg-cell-frozen": {
        display: "flex",
        boxShadow: "unset",
        position: "sticky !important",
        zIndex: 1
      },
      '&.rdg-cell-frozen:not([role="columnheader"])': {
        position: "sticky !important",
        zIndex: 1
      },
      '&:has(> .MuiCheckbox-root):not([role="columnheader"])': {
        overflow: "visible",
        display: "flex",
        alignItems: "center",
        justifyContent: "center"
      },
      '&[role="columnheader"]:has(> .MuiCheckbox-root)': {
        justifyContent: "center",
        alignItems: "center"
      },
      "&:after": {
        content: '""',
        borderRight: `${r.vars.size.baseSpacings.sp0} solid ${r.vars.palette.divider}`,
        position: "absolute",
        right: r.vars.size.baseSpacings.sp0,
        height: "100%"
      },
      "& .m4l_icon": {
        height: "100%"
      },
      '&[role="columnheader"]': {
        position: "sticky",
        top: 0,
        zIndex: 2,
        "&:has(> .MuiCheckbox-root)": {
          borderTopLeftRadius: r.vars.size.baseSpacings.sp2,
          overflow: "visible",
          display: "flex",
          alignItems: "center",
          justifyContent: "center"
        }
      }
    },
    '& .rdg-cell[role="columnheader"] .rdg-header-sort-name': {
      ...r.colorSchemes.finalTheme.typography.bodyDens,
      width: "100%",
      display: "-webkit-box !important",
      WebkitBoxOrient: "vertical !important",
      WebkitLineClamp: e?.currentRowHeightVariant === "compact" ? "1 !important" : e?.currentRowHeightVariant === "confortable" ? "3 !important" : "2 !important",
      overflow: "hidden !important",
      textOverflow: "ellipsis !important",
      wordBreak: "break-word !important",
      whiteSpace: "normal !important",
      ...i(
        r.generalSettings.isMobile,
        e?.size || "medium",
        "bodyDens"
      ),
      lineHeight: "var(--rdg-summary-row-height)!important",
      color: `${r.vars.palette.text.secondary}`
    },
    '& .rdg-cell:not([role="columnheader"]):not(:has(> .MuiCheckbox-root))': {
      display: "-webkit-box !important",
      WebkitBoxOrient: "vertical !important",
      WebkitLineClamp: e?.currentRowHeightVariant === "compact" ? "1 !important" : e?.currentRowHeightVariant === "confortable" ? "3 !important" : "2 !important",
      overflow: "hidden !important",
      textOverflow: "ellipsis !important",
      wordBreak: "break-word !important",
      whiteSpace: "normal !important",
      lineHeight: e?.currentRowHeightVariant === "compact" ? `${e?.currentRowHeight}px !important` : e?.currentRowHeightVariant === "confortable" ? `${(e?.currentRowHeight ?? 48) / 3}px !important` : `${(e?.currentRowHeight ?? 40) / 2}px !important`
    },
    '& .rdg-cell[role="columnheader"].filter-cell': {
      "& .M4LDataGrid-draggableHeaderRoot": {
        gap: r.vars.size.baseSpacings.sp3,
        "& .rdg-header-sort-cell": {
          maxHeight: "min-content"
        },
        "& .rdg-header-sort-name": {
          lineHeight: "1!important"
        }
      }
    },
    '& .rdg-cell[role="columnheader"] [draggable="true"]': {
      fontWeight: 600
    },
    "&&& [aria-selected=true]": {},
    "& .rdg-cell.rdg-cell-align-left": {
      textAlign: "start",
      justifyContent: "center",
      alignContent: "center",
      alignItems: "center",
      '&:not([role="columnheader"])': {
        "& > div:first-of-type": {
          marginRight: "auto"
        }
      }
    },
    "& .rdg-cell.rdg-cell-align-center": {
      textAlign: "center",
      alignContent: "center",
      '&:not([role="columnheader"])': {
        "& > div:first-of-type": {
          margin: "0 auto"
        }
      }
    },
    "& .rdg-cell.rdg-cell-align-right": {
      textAlign: "right",
      alignContent: "center",
      '&:not([role="columnheader"])': {
        "& > div:first-of-type": {
          marginLeft: "auto"
        }
      }
    },
    '& [role="columnheader"].rdg-cell.rdg-cell-align-left .rdg-header-sort-name': {
      textAlign: "start"
    },
    '& [role="columnheader"].rdg-cell.rdg-cell-align-center .rdg-header-sort-name': {
      textAlign: "center"
    },
    '& [role="columnheader"].rdg-cell.rdg-cell-align-right .rdg-header-sort-name': {
      textAlign: "right",
      paddingRight: r.vars.size.baseSpacings.sp3
    },
    "& .rdg-row .rdg-cell-frozen-last:after": {
      borderRight: "0px solid transparent"
    },
    "& .rdg-row .rdg-cell-frozen": {
      position: "sticky !important",
      zIndex: 1,
      left: "var(--rdg-cell-left, 0)"
    },
    "& .rdg-row .rdg-cell-frozen-last": {
      position: "sticky !important",
      zIndex: 1,
      left: "var(--rdg-cell-left, 0)"
    },
    "& .rdg-row :last-child:after": {
      borderRight: "0px solid",
      borderColor: r.vars.palette.background.surface
    },
    "& .rdg-header-row": {
      display: "contents",
      backgroundColor: r.vars.palette.background.base,
      fontWeight: "bold",
      "& > .rdg-cell": {
        zIndex: 2,
        position: "sticky"
      },
      "& > .rdg-cell.rdg-cell-frozen": {
        zIndex: 3
      }
    },
    "& .rdg-header-row .rdg-cell": {
      gridTemplateColumns: "auto",
      boxShadow: "unset!important",
      borderBottom: r.vars.size.borderStroke.container,
      borderColor: `${r.vars.palette?.background.surface}!important`,
      cursor: "pointer",
      "&:hover": {
        boxShadow: `inset 1px 0 0 0 ${r.vars.palette?.border.default}, inset -1px 0 0 0 ${r.vars.palette?.border.default}!important `
      },
      "&[data-resize]": {
        touchAction: "none"
      },
      '& [draggable="true"]': {
        fontSize: r.typography.body
      },
      "&.rdg-cell-frozen-last": {
        borderColor: r.vars.palette.background.default,
        boxShadow: "var(--rdg-frozen-cell-box-shadow)"
      },
      "& .rdg-header-sort-cell": {
        "& .rdg-header-sort-name + span": {
          position: "absolute",
          margin: "auto",
          right: r.vars.size.baseSpacings.sp2,
          "& .rdg-sort-arrow": {
            width: r.vars.size.baseSpacings.sp2
          }
        }
      },
      "& .rdg-sort-arrow": {}
    },
    '& [class*="r1y6ywlx"]': {
      cursor: "col-resize",
      position: "absolute",
      insetBlockStart: 0,
      insetInlineEnd: 0,
      insetBlockEnd: 0,
      inlineSize: "10px"
    },
    "& .rdg-header-row :last-child.rdg-cell": {
      borderTopRightRadius: r.vars.size.baseSpacings.sp0,
      "&:after": {
        borderRight: `${r.vars.size.baseSpacings.sp0} solid transparent`
      }
    },
    "& .filter_cell_div": {
      paddingLeft: r.vars.size.baseSpacings.sp2,
      paddingRight: r.vars.size.baseSpacings.sp2
    },
    "& .rdg-header-sort-cell": {
      width: "100%",
      flexGrow: "1",
      alignItems: "center",
      color: r.vars.palette.text.primary,
      height: "100%"
    }
  }),
  /**
   * Estilos para el wrapper del checkbox en las celdas.
   */
  checkboxCellWrapper: ({ theme: r }) => ({
    "& .checkbox-checked": {
      "& .M4LIcon-icon": {
        backgroundColor: r.vars.palette.primary.enabled
      }
    },
    "& .checkbox-unChecked": {
      "& .M4LIcon-icon": {
        backgroundColor: r.vars.palette.text.primary
      }
    },
    "& .MuiCheckbox-root": {
      overflow: "visible",
      padding: 0,
      ...r.generalSettings.isMobile ? {
        width: r.vars.size.mobile.small.action,
        height: r.vars.size.mobile.small.action
      } : {
        width: r.vars.size.desktop.small.action,
        height: r.vars.size.desktop.small.action
      },
      display: "inline-flex",
      justifyContent: "center",
      alignItems: "center",
      borderRadius: r.size.borderRadius.r1,
      "&:hover": {
        backgroundColor: r.vars.palette.default.hoverOpacity
      },
      "&:active": {
        backgroundColor: r.vars.palette.default.activeOpacity
      },
      "&.Mui-checked": {
        "&:hover": {
          backgroundColor: r.vars.palette.primary.hoverOpacity,
          "& .M4LIcon-icon": {
            backgroundColor: r.vars.palette.primary.hover
          }
        },
        "&:active": {
          backgroundColor: r.vars.palette.primary.activeOpacity,
          "& .M4LIcon-icon": {
            backgroundColor: r.vars.palette.primary.active
          }
        }
      },
      "&.Mui-focusVisible, &:focus-visible": {
        outline: `1px solid ${r.vars.palette.primary.focusVisible}`
      },
      "& > svg": {
        color: r.vars.palette.text.secondary
      }
    }
  }),
  /**
   * Estilos para el contenedor de toggle de vista cards.
   */
  containerToggleCards: ({ theme: r }) => ({
    display: "grid",
    gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
    gap: r.vars.size.baseSpacings.sp3
  }),
  /**
   * Estilos para el botón de toggle de tarjeta.
   */
  cardToggleCardButton: ({ theme: r, ownerState: e }) => ({
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    cursor: "pointer",
    height: r.vars.size.baseSpacings.sp14,
    width: r.vars.size.baseSpacings.sp14,
    gap: r.vars.size.baseSpacings.sp2,
    borderColor: e?.isActive ? r.vars.palette.primary.toneOpacity : r.vars.palette.border.disabled
  }),
  /**
   * Estilos para el texto del botón de toggle.
   */
  textToggleCardButton: ({ theme: r, ownerState: e }) => ({
    "&.M4LTypography-root": {
      color: e?.isActive ? r.vars.palette.primary.semanticText : r.vars.palette.text.secondary,
      cursor: "pointer"
    }
  }),
  /**
   * Estilos para el contenedor de tarjetas en CardsView.
   */
  cardsContainer: () => ({
    flexGrow: 1,
    flexShrink: 1,
    flexBasis: 0,
    minHeight: 0,
    overflow: "auto",
    "& > .M4LContainerFlow-root": {
      alignItems: "start"
    }
  }),
  /**
   * List view container (independent from cards; virtualized list).
   */
  listContainer: () => ({
    flexGrow: 1,
    flexShrink: 1,
    flexBasis: 0,
    minHeight: 0,
    overflow: "auto"
  }),
  /**
   * List view row wrapper. Same visual style as card (outlined): background, border radius, border, hover/active.
   * List is full-width (one row per line); card gets variant="outlined" from Card component.
   */
  list: ({ theme: r, ownerState: e }) => ({
    display: "flex",
    flexDirection: "column",
    alignItems: "start",
    width: "100%",
    minWidth: 0,
    maxWidth: "none",
    cursor: "pointer",
    padding: r.vars.size.baseSpacings["sp2-5"],
    gap: "0 !important",
    borderRadius: r.vars.size.borderRadius.r0,
    backgroundColor: r.vars.palette.background.default,
    overflow: "hidden",
    transition: "all 0.2s ease-in-out",
    borderBottom: `1px solid ${r.vars.palette.border.disabled} !important`,
    borderLeft: "2px solid transparent !important",
    border: "0px solid transparent",
    // When the checkbox (or any inner control) receives focus,
    // Card applies a focus-within border color to ALL sides.
    // For ListView ("CustomList" behavior), only the left edge must be highlighted.
    "&:focus-visible, &:focus-within": {
      borderColor: `${r.vars.palette.border.disabled} !important`
    },
    "&:hover": {
      zIndex: 1,
      borderLeft: `2px solid ${r.vars.palette.border.secondary} !important`,
      backgroundColor: r.vars.palette.background.default,
      boxShadow: r.vars.customShadows.z1
    },
    "&:active": {
      backgroundColor: r.vars.palette.background.default
    },
    ...e?.checked && !e?.selected ? {
      borderLeft: `2px solid ${r.vars.palette.primary.activeOpacity} !important`,
      border: "0px solid transparent",
      "&:focus-visible, &:focus-within, &:hover": {
        // Card's focus-within sets `border` on ALL sides with `!important`.
        // For CustomList (ListView checkeable), only the left edge must be highlighted.
        border: "0px solid transparent !important",
        borderLeft: `2px solid ${r.vars.palette.primary.activeOpacity} !important`
      }
    } : {},
    ...e?.selected ? {
      borderLeft: `2px solid ${r.vars.palette.primary.selected} !important`,
      "&:hover": {
        borderLeft: `2px solid ${r.vars.palette.primary.selected} !important`
      },
      "&:focus-visible, &:focus-within": {
        // Same reasoning as the checkeable state: override Card's focus border.
        border: "0px solid transparent !important",
        borderLeft: `2px solid ${r.vars.palette.primary.selected} !important`
      }
    } : {}
  }),
  /**
   * Wrapper for each virtualized list row (receives style from FixedSizeList).
   * Same as card slot usage: no extra layout; only forwards the style.
   */
  listRowVirtualizedItem: ({ ownerState: r }) => ({
    position: "absolute",
    top: 0,
    left: 0,
    width: "100%",
    transform: `translateY(${r.offsetTop ?? 0}px)`
  }),
  /**
   * Container that holds the total virtualized height for TanStack Virtual.
   * This element defines the scrollable area; its height equals the sum of all row heights.
   */
  listVirtualContainer: ({ ownerState: r }) => ({
    width: "100%",
    position: "relative",
    height: `${r.totalSize ?? 0}px`
  }),
  /**
   * Container that holds the total virtualized height for TanStack Virtual in CardsView.
   * This element defines the scrollable area; its height equals the sum of all card heights.
   */
  cardsVirtualContainer: ({ ownerState: r }) => ({
    width: "100%",
    position: "relative",
    height: `${r.totalSize ?? 0}px`
  }),
  /**
   * Wrapper for each virtualized card row (receives style from TanStack Virtual).
   * Uses CSS Grid with explicit column count so cards in incomplete rows (last row)
   * get the same width as cards in full rows. gap and paddingBottom match ContainerFlow (16px).
   */
  cardsVirtualRowItem: ({ ownerState: r }) => ({
    position: "absolute",
    top: 0,
    left: 0,
    width: "100%",
    transform: `translateY(${r.offsetTop ?? 0}px)`,
    display: "grid",
    gridTemplateColumns: `repeat(${r.cardsPerRow ?? 1}, 1fr)`,
    gap: "16px",
    paddingBottom: "16px"
  }),
  /**
   * Estilos para cada tarjeta individual en CardsView.
   */
  card: ({ theme: r, ownerState: e }) => ({
    display: "flex",
    flexDirection: "column",
    alignItems: "start",
    ...e?.listCard ? { width: "100%", minWidth: 0, maxWidth: "none" } : { minWidth: "280px", maxWidth: "580px" },
    cursor: "pointer",
    padding: r.vars.size.baseSpacings["sp2-5"],
    gap: "0 !important",
    ...e?.checked && !e?.selected ? {
      borderColor: r.vars.palette.primary.activeOpacity
    } : {},
    ...e?.selected ? {
      borderColor: r.vars.palette.primary.selected
    } : {}
  }),
  cardContentWrapper: () => ({
    width: "100%"
  }),
  /**
   * Estilos para el header de la tarjeta.
   */
  cardHeader: ({ theme: r, ownerState: e }) => ({
    display: "flex",
    justifyContent: e?.hasCheckedRows ? "space-between" : "flex-end",
    alignItems: "center",
    width: "100%",
    height: "24px",
    gap: r.vars.size.baseSpacings.sp2
  }),
  /**
   * Estilos para la sección izquierda del header de tarjeta
   */
  cardHeaderLeft: () => ({
    display: "flex",
    alignItems: "center"
  }),
  /**
   * Estilos para la sección derecha del header de tarjeta.
   */
  cardHeaderRight: ({ theme: r }) => ({
    display: "flex",
    alignItems: "center",
    gap: r.vars.size.baseSpacings["sp0-5"]
  }),
  /**
   * Estilos para el contenido de la tarjeta.
   */
  cardContent: ({ theme: r }) => ({
    display: "flex",
    flexDirection: "column",
    gap: r.vars.size.baseSpacings.sp2,
    padding: r.vars.size.density.compact
  }),
  /**
   * Estilos para el contenedor de label y valor de columna.
   */
  containerLabelValueColumn: ({ theme: r, ownerState: e }) => ({
    display: "flex",
    flexDirection: e?.hasActions ? "row" : "column",
    justifyContent: e?.hasActions ? "space-between" : "flex-start",
    alignItems: e?.hasActions ? "center" : "start",
    gap: r.vars.size.baseSpacings["sp0-5"],
    width: e?.hasActions ? "100%" : "auto"
  }),
  /**
   * Estilos para el wrapper del contenido de columna.
   */
  contentWrapperColumn: ({ theme: r, ownerState: e }) => ({
    flex: e?.hasActions ? 1 : "none",
    display: "flex",
    flexDirection: "column",
    alignItems: "start",
    gap: r.vars.size.baseSpacings["sp0-5"]
  }),
  /**
   * Estilos para el contenedor de detalle de tarjeta.
   */
  cardDetailContainer: ({ theme: r }) => ({
    display: "flex",
    flexDirection: "column",
    gap: r.vars.size.baseSpacings.sp3,
    padding: r.vars.size.baseSpacings.sp3,
    height: "100%",
    overflow: "auto"
  }),
  /**
   * Estilos para el label del header de columna.
   */
  labelHeaderColumn: () => ({}),
  /**
   * Estilos para el valor de columna.
   */
  valueColumn: () => ({}),
  /**
   * Estilos para el wrapper del editor de celda.
   */
  editorCellWrapper: ({ theme: r, ownerState: e }) => ({
    overflow: "clip",
    outline: "none",
    color: r.vars.palette.text.primary,
    paddingBlock: 0,
    alignContent: "center",
    backgroundColor: "inherit",
    whiteSpace: "nowrap",
    textOverflow: "ellipsis",
    inlineSize: "100%",
    alignSelf: "stretch",
    boxSizing: "border-box",
    ...i(
      r.generalSettings.isMobile,
      e?.size || "medium",
      "bodyStandard"
    ),
    ...o(r, e?.size || "medium", "base", (a) => ({
      minHeight: a,
      height: 24,
      lineHeight: `${a} !important`
    })),
    "& input": {
      width: "100%",
      textAlign: "inherit",
      color: r.vars.palette.text.secondary,
      padding: `${r.vars.size.baseSpacings.sp0} ${r.vars.size.baseSpacings.sp1}`,
      border: `1px solid ${r.vars.palette.border.secondary}`,
      borderRadius: r.vars.size.borderRadius["r1-5"],
      outline: "none",
      ...r.colorSchemes.finalTheme.typography.body,
      ...o(r, e?.size || "medium", "case", (a) => ({
        height: a
      })),
      "&:focus": {
        border: `1px solid ${r.vars.palette.border.secondary}`,
        outline: "none",
        boxShadow: "none"
      },
      "&:hover": {
        border: `1px solid ${r.vars.palette.border.secondary}`,
        outline: "none"
      }
    }
  }),
  /**
   * Placeholder editable
   */
  editablePlaceholder: ({ theme: r }) => ({
    display: "flex",
    alignItems: "center",
    gap: r.vars.size.baseSpacings.sp1
  }),
  /**
   * EditLabel
   */
  editLabel: ({ theme: r, ownerState: e }) => ({
    width: "auto",
    opacity: 1,
    transition: "opacity 0.3s ease",
    ...i(
      r.generalSettings.isMobile,
      e?.size || "medium",
      "bodyStandard"
    )
  }),
  /**
   * Botón para mostrar el input en los editores (cards)
   */
  iconButtonEdit: ({ theme: r }) => ({
    "& .M4LIcon-icon": {
      backgroundColor: `${r.vars.palette.text.secondary} !important`
    }
  }),
  /**
   * Estilos para el header de tarjeta personalizada.
   */
  customCardHeader: ({ theme: r }) => ({
    display: "flex",
    gap: r.vars.size.baseSpacings.sp4,
    alignItems: "center",
    marginBottom: r.vars.size.baseSpacings.sp2
  }),
  /**
   * Estilos para el avatar de tarjeta personalizada.
   */
  customCardAvatar: ({ theme: r }) => ({
    width: "32px",
    height: "32px",
    borderRadius: r.vars.size.borderRadius.r3,
    border: r.vars.size.borderStroke.container,
    borderColor: r.vars.palette.primary.toneOpacity,
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    flexShrink: 0
  }),
  /**
   * Estilos para nombre y email en tarjeta personalizada.
   */
  customCardNameEmail: ({ theme: r }) => ({
    display: "flex",
    flexDirection: "column",
    gap: r.vars.size.baseSpacings["sp0-5"]
  }),
  /**
   * Estilos para campo con icono en tarjeta personalizada.
   */
  customCardFieldWithIcon: ({ theme: r }) => ({
    display: "flex",
    alignItems: "center",
    gap: r.vars.size.baseSpacings.sp3
  }),
  /**
   * Estilos para contenido de campo en tarjeta personalizada.
   */
  customCardFieldContent: ({ theme: r }) => ({
    display: "flex",
    flexDirection: "column",
    gap: r.vars.size.baseSpacings["sp0-5"]
  }),
  /**
   * Estilos para contenedor de icono en tarjeta personalizada.
   */
  customCardIconContainer: ({ theme: r }) => ({
    width: "24px",
    height: "24px",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    borderRadius: r.vars.size.borderRadius.r2,
    border: r.vars.size.borderStroke.container,
    borderColor: r.vars.palette.primary.toneOpacity,
    flexShrink: 0
  }),
  /**
   * Estilos para el contenedor raíz de las cabeceras arrastrables
   */
  draggableHeaderRoot: () => ({
    cursor: "move",
    display: "flex",
    flexDirection: "column",
    lineHeight: "1",
    height: "100%",
    width: "100%",
    justifyContent: "center"
  }),
  iconSearch: {},
  /**
   * Estilos para el wrapper del input en cabeceras arrastrables
   */
  draggableWrapperInputBase: ({ theme: r, ownerState: e }) => ({
    borderTop: "1px solid var(--rdg-border-color)",
    width: "100%",
    display: "flex",
    alignItems: "center",
    backgroundColor: r.vars.palette.default.enabled,
    padding: r.vars.size.baseSpacings.sp1,
    marginBottom: r.vars.size.baseSpacings.sp2,
    gap: r.vars.size.baseSpacings.sp1,
    borderRadius: r.vars.size.borderRadius.r1,
    ...o(r, e?.size || "medium", "action", (a) => ({
      minHeight: a,
      height: a
    }))
  }),
  /**
   * Estilos base para el input del header
   */
  headerInputBase: () => ({
    width: "100%",
    padding: "unset",
    backgroundColor: "unset"
  }),
  /**
   * Estilos para el contenedor del skeleton de carga
   */
  wrapperSkeleton: ({ theme: r, ownerState: e }) => ({
    display: "flex",
    width: "100%",
    height: "100%",
    alignItems: "center",
    "& .MuiSkeleton-root": {
      ...o(r, e?.size || "medium", "base", (a) => ({
        minHeight: `${a}!important`,
        height: `${a}!important`
      }))
    }
  }),
  /**
   * Estilos para el contenido del modal de configuración
   */
  contentModalSetting: () => ({
    "&": {
      display: "flex",
      flexDirection: "column",
      height: "100%"
    }
  }),
  /**
   * Estilos para el contenedor de nombre de columna con icono
   */
  nameColumnIcon: ({ theme: r }) => ({
    display: "flex",
    alignItems: "center",
    gap: r.vars.size.baseSpacings.sp1,
    position: "relative",
    overflow: "visible"
  }),
  /**
   * Estilos para el nombre de columna con truncado de texto
   */
  nameColumn: ({ ownerState: r }) => ({
    display: "-webkit-box",
    WebkitBoxOrient: "vertical",
    WebkitLineClamp: r?.currentRowHeightVariant === "compact" ? 1 : r?.currentRowHeightVariant === "confortable" ? 3 : 2,
    overflow: "hidden",
    textOverflow: "ellipsis",
    wordBreak: "break-word",
    whiteSpace: "normal",
    width: "100%"
  }),
  /**
   * Estilos para el contenedor de icono de columna
   */
  iconColumn: ({ theme: r }) => ({
    display: "flex",
    alignItems: "center",
    gap: r.vars.size.baseSpacings.sp1
  }),
  headerRenderClick: () => ({
    width: "fit-content"
  }),
  /**
   * Estilos para la lista del menú de opciones
   */
  menuList: ({ theme: r }) => ({
    padding: r.vars.size.baseSpacings.sp3,
    display: "flex",
    flexDirection: "column",
    gap: r.vars.size.baseSpacings.sp1,
    "& > div": {
      paddingLeft: r.vars.size.baseSpacings.sp4,
      paddingRight: r.vars.size.baseSpacings.sp4
    }
  }),
  /**
   * Estilos para el botón de acciones del header
   */
  buttonHeaderActions: ({ theme: r }) => ({
    display: "flex",
    alignItems: "center",
    justifyContent: "space-between",
    width: "100%",
    cursor: "pointer",
    height: "100%",
    "> span": {
      display: "flex",
      alignItems: "center",
      justifyContent: "space-between",
      width: "100%",
      "& svg": {
        width: "8px",
        height: "8px",
        color: r.vars.palette.chips.default.contained.backgroundColorTone
      }
    }
  }),
  /**
   * Estilos para el formateador de iconos de columna
   */
  columnIconFormatter: ({ theme: r }) => ({
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    gap: r.vars.size.baseSpacings.sp2,
    minWidth: "max-content",
    overflow: "visible",
    flexWrap: "nowrap"
  }),
  /**
   * Estilos para el contenedor raíz del renderizador de celdas de grupo por defecto
   */
  defaultRenderGroupCellRoot: ({ theme: r, ownerState: e }) => ({
    display: "flex",
    alignItems: "center",
    gap: r.vars.size.baseSpacings.sp2,
    cursor: "pointer",
    width: "100%",
    justifyContent: e?.align === "center" ? "center" : e?.align === "right" ? "flex-end" : "flex-start"
  }),
  /**
   * Estilos para el texto del renderizador de celdas de grupo por defecto
   */
  defaultRenderGroupCellText: ({ ownerState: r }) => ({
    fontWeight: 600,
    display: "-webkit-box",
    WebkitBoxOrient: "vertical",
    WebkitLineClamp: r?.currentRowHeightVariant === "compact" ? 1 : r?.currentRowHeightVariant === "confortable" ? 3 : 2,
    overflow: "hidden",
    textOverflow: "ellipsis",
    wordBreak: "break-word",
    whiteSpace: "normal"
  }),
  /**
   * Wrapper para celdas con color de fondo personalizado.
   *
   * Este estilo aplica backgroundColor y ocupa toda la celda,
   * manteniendo el comportamiento de truncado con ellipsis.
   * El color se recibe a través de ownerState.cellBackgroundColor
   */
  cellBackgroundWrapper: ({ ownerState: r }) => ({
    // Ocupar toda la celda con margin negativo
    margin: "-8px",
    padding: "8px",
    width: "calc(100% + 16px)",
    height: "calc(100% + 16px)",
    boxSizing: "border-box",
    // Mantener el comportamiento de truncado igual que las celdas
    display: "-webkit-box",
    WebkitBoxOrient: "vertical",
    WebkitLineClamp: r?.currentRowHeightVariant === "compact" ? 1 : r?.currentRowHeightVariant === "confortable" ? 3 : 2,
    overflow: "hidden",
    textOverflow: "ellipsis",
    wordBreak: "break-word",
    whiteSpace: "normal",
    alignContent: "center",
    ...r?.cellBackgroundColor ? { backgroundColor: r.cellBackgroundColor } : {}
  })
};
export {
  d as dataGridStyles
};
