import { getTypographyStyles as e } from "../../utils/getTypographyStyles.js";
import { getSizeStyles as o } from "../../utils/getSizeStyles/getSizeStyles.js";
const s = "dynamic", d = {
  /**
   * Root: Estilos del contenedor principal del componente.
   */
  root: ({ theme: i, ownerState: r }) => ({
    containerName: s,
    containerType: "inline-size",
    width: "100%",
    height: "auto",
    padding: 0,
    ...o(
      i,
      r?.size || "medium",
      "container",
      (a) => ({
        height: a,
        maxHeight: a,
        minHeight: a
      })
    )
  }),
  /**
   * innerContainer: Estilos del contenedor interno del componente.
   */
  innerContainer: ({ theme: i, ownerState: r }) => ({
    display: "flex",
    alignItems: "center",
    justifyContent: "flex-start",
    width: "100%",
    height: "fit-content",
    borderRadius: i.vars.size.borderRadius.r2,
    background: i.vars.palette.background.default,
    boxShadow: r?.isValid ? `inset 0px 0px 0px 1px ${i.vars.palette.border.secondary}` : `inset 0px 0px 0px 1px ${i.vars.palette.error.enabled}`,
    overflow: "hidden",
    '&:has([aria-expanded="true"])': {
      boxShadow: r?.isValid ? `inset 0px 0px 0px 1.3px ${i.vars.palette.border.main}` : `inset 0px 0px 0px 1px ${i.vars.palette.error.enabled}`
    }
  }),
  /**
   * inputSort: Estilos del contenedor del campo de entrada de ordenamiento.
   */
  inputSort: ({ theme: i, ownerState: r }) => ({
    display: "flex",
    flexDirection: "row",
    paddingLeft: i.vars.size.baseSpacings.sp2,
    paddingRight: i.vars.size.baseSpacings.sp1,
    height: "100%",
    overflow: "hidden",
    maxWidth: "120px",
    width: "100%",
    alignItems: "center",
    borderTopLeftRadius: i.vars.size.borderRadius.r1,
    borderBottomLeftRadius: i.vars.size.borderRadius.r1,
    ...o(
      i,
      r?.size || "medium",
      "container",
      (a) => ({
        height: a
      })
    )
  }),
  /**
   * inputSortInput: Estilos del campo de entrada de ordenamiento.
   */
  inputSortInput: ({ theme: i, ownerState: r }) => ({
    width: "100%",
    background: "#ffffff00",
    ...o(
      i,
      r?.size || "medium",
      "action",
      (a) => ({
        height: a,
        minHeight: a,
        maxHeight: a
      })
    ),
    fontFamily: "inherit",
    ...e(
      i.generalSettings.isMobile,
      r?.size || "medium",
      "bodyStandard"
    ),
    color: i.vars.palette.text.secondary,
    border: 0,
    borderColor: "transparent",
    paddingLeft: i.vars.size.baseSpacings.sp2,
    paddingRight: i.vars.size.baseSpacings.sp2,
    height: "100%",
    "&::placeholder": {
      color: i.vars.palette.text.secondary
    },
    "&:focus-visible": {
      color: i.vars.palette.text.secondary,
      border: "unset",
      borderColor: i.vars.palette.primary.opacity,
      BorderRadius: i.vars.size.borderRadius["r0-5"],
      outline: "none!important"
    }
  }),
  /**
   * appliedSorts: Estilos del contenedor de los campos de ordenamiento aplicados.
   */
  appliedSorts: ({ theme: i, ownerState: r }) => ({
    width: "100%",
    height: "fit-content",
    display: "flex",
    alignItems: "center",
    borderLeft: "none",
    margin: "0px",
    padding: `0px ${i.vars.size.baseSpacings.sp1}`,
    flex: 1,
    overflow: "hidden",
    ...o(
      i,
      r?.size || "medium",
      "container",
      (a) => ({
        height: a,
        maxHeight: a,
        minHeight: a
      })
    )
  }),
  /**
   * appliedSortInnerContainer: Estilos del contenedor interno de los campos de ordenamiento aplicados.
   */
  appliedSortInnerContainer: ({ theme: i, ownerState: r }) => ({
    padding: i.vars.size.baseSpacings["sp0-5"],
    gap: i.vars.size.baseSpacings.sp1,
    height: "fit-content",
    display: "flex",
    flexWrap: "nowrap",
    width: "100%",
    justifyContent: "flex-start",
    alignItems: "center",
    overflow: "auto hidden",
    position: "relative",
    "& .M4LChip-root": {
      borderRadius: i.vars.size.borderRadius.r1,
      ...o(
        i,
        r?.size || "medium",
        "action",
        (a) => ({
          height: a
        })
      ),
      "& .M4LIconButton-styledMUIIconButton:hover": {
        backgroundColor: `${i.vars.palette.chips.error.contained.backgroundHover} !important`,
        "& .M4LIcon-icon": {
          backgroundColor: `${i.vars.palette.chips.error.contained.backgroundColorTone} !important`
        }
      }
    }
  }),
  /**
   * actions: Estilos del contenedor de los botones de acción.
   */
  actions: ({ theme: i, ownerState: r }) => ({
    gridArea: "actions-filter",
    overflow: "hidden",
    display: "flex",
    flexDirection: "row",
    gap: i.vars.size.baseSpacings["sp0-5"],
    padding: i.vars.size.baseSpacings.sp1,
    height: "100%",
    alignItems: "center",
    borderTopRightRadius: i.vars.size.borderRadius.r1,
    borderBottomRightRadius: i.vars.size.borderRadius.r1,
    boxShadow: `inset 1px 0px 0px 0px ${i.vars.palette.border.secondary}`,
    ...!r?.visibleRefresh && !r?.isDirty && {
      display: "none"
    },
    ...r?.inEdition && r?.isValid && {
      boxShadow: `inset 1px 0px 0px 0px ${i.vars.palette.border.main}`
    },
    ...!r?.isValid && {
      boxShadow: `inset 1px 0px 0px 0px ${i.vars.palette.error.enabled}`
    }
  }),
  /**
   * actionsClearButton: Estilos del botón de acción de limpiar.
   */
  actionsClearButton: ({ theme: i }) => ({
    visibility: "visible",
    "&:hover": {
      backgroundColor: `${i.vars.palette.chips.error.contained.backgroundHover} !important`,
      "& .M4LIcon-icon": {
        backgroundColor: `${i.vars.palette.chips.error.contained.backgroundColorTone} !important`
      }
    }
  }),
  /**
   * actionsSubmitButton: Estilos del botón de acción de envío de formulario.
   */
  actionsSubmitButton: ({ theme: i, ownerState: r }) => ({
    ...r?.isDirty ? {
      animation: "changeBgColor 0.9s ease infinite",
      "& .M4LIcon-icon": {
        background: `${i.vars.palette.primary.main} !important`
      }
    } : null,
    //Create and apply animation with change background color red and green
    "@keyframes changeBgColor": {
      "0%": {
        background: i.vars.palette.primary.hoverOpacity
      },
      "50%": {
        background: i.vars.palette.primary.activeOpacity
      },
      "100%": {
        background: i.vars.palette.primary.hoverOpacity
      }
    }
  }),
  /**
   * popoverMenu: Estilos del menú emergente.
   */
  popoverMenu: ({ theme: i }) => ({
    "& .MuiPaper-root": {
      display: "flex",
      flexDirection: "column",
      padding: i.vars.size.baseSpacings.sp3,
      gap: i.vars.size.baseSpacings.sp1,
      borderRadius: i.vars.size.borderRadius.r1,
      backgroundColor: i.vars.palette.background.default
    }
  }),
  /**
   * popoverSort: Estilos del menú emergente de ordenamiento.
   */
  popoverSort: ({ theme: i }) => ({
    width: "auto",
    "& .MuiPaper-root": {
      padding: "0 !important",
      minWidth: "220px",
      maxWidth: "100%",
      minHeight: "auto",
      borderRadius: `${i.vars.size.borderRadius.r3}!important`,
      backgroundColor: i.vars.palette.background.default,
      boxShadow: i.customShadows?.z3,
      "& .M4LPopover-arrowStyle": {
        display: "none"
      },
      "& .M4LRHFormProvider-root": {
        gap: "0px",
        width: "max-content",
        minWidth: "220px",
        maxWidth: "420px",
        height: "fit-content",
        overflow: "visible"
      },
      "& .M4LWindowBase-root": {
        borderRadius: `${i.vars.size.borderRadius.r3} !important`,
        border: "unset!important",
        "& .M4LWindowBase-headerWindowComponent": {
          cursor: "unset"
        }
      }
    }
  }),
  /**
   * popoverSortContainerFields: Estilos del contenedor de campos del menú emergente de ordenamiento.
   */
  popoverSortContainerFields: ({ theme: i }) => ({
    display: "flex",
    flexDirection: "column",
    gap: i.vars.size.baseSpacings.sp3
  }),
  /**
   * popoverSortActions: Estilos del contenedor de acciones del menú emergente de ordenamiento.
   */
  popoverSortActions: ({ theme: i }) => ({
    paddingTop: i.vars.size.baseSpacings.sp6
  }),
  /**
   * inputSortSkeleton: Estilos del esqueleto del campo de entrada de ordenamiento.
   */
  inputSortSkeleton: ({ theme: i, ownerState: r }) => ({
    width: "100%",
    minWidth: "80px",
    marginLeft: i.vars.size.baseSpacings.sp2,
    marginRight: i.vars.size.baseSpacings.sp2,
    ...o(
      i,
      r?.size || "medium",
      "base",
      (a) => ({
        height: a,
        minHeight: a,
        maxHeight: a
      })
    )
  })
};
export {
  d as dynamicSortStyles
};
