import { getHeightSizeStyles as s } from "../../../../utils/getSizeStyles/getSizeStyles.js";
import { getTypographyStyles as e } from "../../../../utils/getTypographyStyles.js";
const l = {
  /* *
  * 🌳  Estilos para el componente raiz 🌳 */
  root: () => ({}),
  /**
   * Styles for the Typography component
   * @param {object} ownerState - The state of the owner component
   * @param {object} theme - The theme object
   * @returns {object} The styles for the Typography component
   */
  typographyStyled: ({ ownerState: i, theme: r }) => ({
    "&.MuiTypography-root": {
      color: "inherit",
      cursor: i?.disabled ? "not-allowed" : "inherit",
      /* *
      * 🔠  Estilos para tamaños de la tipografia 🔠 */
      ...e(
        r.generalSettings.isMobile,
        i?.size || "medium",
        "bodyStandard"
      ),
      ...e(
        r.generalSettings.isMobile,
        i?.size || "small",
        "bodyStandard"
      ),
      whiteSpace: i?.whiteSpace ? "normal" : "nowrap"
    }
  }),
  /**
   * Styles for the Skeleton component
   */
  skeletonStyled: ({ ownerState: i, theme: r }) => ({
    "&.MuiSkeleton-root": {
      "&.M4lclassCssSpecificity": {
        width: "100px",
        borderRadius: r.vars.size.borderRadius.r1,
        display: "flex",
        padding: r.vars.size.baseSpacings.sp1,
        backgroundColor: r.vars.palette.skeleton.default,
        ...s(
          r.generalSettings.isMobile,
          i?.size || "medium",
          "base"
        ),
        ...s(
          r.generalSettings.isMobile,
          i?.size || "small",
          "base"
        )
      }
    }
  }),
  /**
   * Styles for the RouterNavLink component
   */
  routerNavLinkStyled: ({ theme: i, ownerState: r }) => ({
    /** 😶‍🌫️ Estilo Disabeld & Enabled para el componente RouterNavLink 😶‍🌫️  */
    cursor: r?.disabled ? "not-allowed" : "pointer",
    pointerEvents: r?.disabled ? "none" : "auto",
    color: r?.disabled ? i.vars.palette.text.disabled : i.vars.palette.primary.enabled,
    /**  Estilo Hover para el componente RouterNavLink  */
    "&:hover": {
      color: i.vars.palette.primary.hover
    },
    /** Estilo para la clase active para el componente Typography hace la funcion de "Visited" 👌*/
    "&.active": {
      color: i.vars.palette.primary.focus,
      //Estado visitado del componente
      "&:hover": {
        color: i.vars.palette.primary.hover
        // Hover del Typography
      },
      "&.Mui-focusVisible, &:focus-visible": {
        outline: `1px solid ${i.vars.palette.primary.focusVisible}`,
        outlineOffset: 2
      }
    },
    /**  Estilo Active para el componente RouterNavLink  */
    "&:active": {
      color: i.vars.palette.primary.active
    },
    /**  Estilo Focus-Visible para el componente RouterNavLink  */
    "&:focus-visible": {
      color: i.vars.palette.primary.focusVisible,
      outline: `1px solid ${i.vars.palette.primary.focusVisible}`,
      outlineOffset: 2,
      borderRadius: i.vars.size.borderRadius["r0-5"]
    }
  })
};
export {
  l as navLinkStyles
};
