import { getHeightSizeStyles as i } from "../../utils/getSizeStyles/getSizeStyles.js";
const l = {
  /**
   * Estilos para el contenedor raíz del Label 🏷️
   * @param {object} theme - El tema de MUI.
   * @param {object} ownerState - El estado del componente.
   * @returns {object} - Los estilos aplicados al root del Label.
   */
  root: ({ theme: e, ownerState: s }) => ({
    width: "100%",
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    ...i(
      e.generalSettings.isMobile,
      s?.size || "small",
      "base",
      (a) => ({
        minHeight: a,
        height: "auto",
        maxHeight: "none"
      })
    ),
    gap: e.size.baseSpacings.sp1,
    /** Estilos para el estado disabled del Label 😶‍🌫️ */
    ...s?.disabled && {
      color: e.vars.palette.text.disabled,
      '& > [class*="M4LIcon-icon"]': {
        PointerEvents: "none"
      }
    }
  }),
  /**
   * Estilos para el slot Typography del Label.
   */
  typographyStyled: ({ theme: e, ownerState: s }) => ({
    "&.MuiTypography-root": {
      width: "fit-content",
      minWidth: e.vars.size.baseSpacings.sp2,
      overflow: "hidden",
      textOverflow: "ellipsis",
      whiteSpace: "nowrap",
      "&.M4lclassCssSpecificity": {
        color: e.vars.palette.text.secondary,
        ...s?.disabled === !0 && {
          color: e.vars.palette.text.disabled
        }
      }
    }
  }),
  /**
   * Estilos para el slot Typography del mensaje obligatorio del Label.
   */
  typographyMandatoryMessageStyled: ({ theme: e, ownerState: s }) => ({
    "&.MuiTypography-root": {
      width: "fit-content",
      overflow: "hidden",
      textOverflow: "ellipsis",
      whiteSpace: "nowrap",
      minWidth: e.vars.size.baseSpacings.sp2,
      "&.M4lclassCssSpecificity": {
        color: e.vars.palette.text.primary,
        ...s?.disabled && {
          color: e.vars.palette.text.disabled
        }
      }
    }
  }),
  /**
   * Estilos para el slot Icon del Label.
   */
  iconHelperMessageStyled: ({ theme: e, ownerState: s }) => ({
    borderRadius: e.vars.size.borderRadius.r1,
    cursor: s?.disabled ? "default" : "pointer",
    '&:hover > [class*="M4LIcon-icon"]': {
      backgroundColor: e.vars.palette.info.hover
    },
    '& > [class*="M4LIcon-icon"]': {
      backgroundColor: e.vars.palette.info.enabled
    },
    ...i(
      e.generalSettings.isMobile,
      s?.size || "small",
      "base"
    )
  }),
  /**
   * Estilos para el slot Skeleton del Label.
   */
  skeletonStyled: ({ ownerState: e, theme: s }) => ({
    width: "100%",
    borderRadius: s.vars.size.borderRadius.r1,
    display: "flex",
    alignItems: "center",
    backgroundColor: s.vars.palette.skeleton.default,
    ...i(
      s.generalSettings.isMobile,
      e?.size || "medium",
      "base"
    ),
    "&.MandatoryLabel": {
      width: s.vars.size.baseSpacings["sp0-5"],
      paddingLeft: s.vars.size.baseSpacings.sp1,
      paddingRight: s.vars.size.baseSpacings.sp1
    },
    "&.SkeletonWidthLabel": {
      width: s.vars.size.baseSpacings.sp14,
      borderRadius: s.vars.size.borderRadius.r1,
      ...i(
        s.generalSettings.isMobile,
        e?.size || "medium",
        "base"
      ),
      ...i(
        s.generalSettings.isMobile,
        e?.size || "small",
        "base"
      )
    },
    "&.HelperIconLabel": {
      borderRadius: s.vars.size.borderRadius.r4,
      ...i(
        s.generalSettings.isMobile,
        e?.size || "small",
        "base",
        (a) => ({
          width: a
        })
      )
    }
  })
};
export {
  l as labelStyles
};
