const i = {
  /**
   * Estilos para Image.
   */
  root: ({ ownerState: e }) => ({
    display: "flex",
    flexDirection: "column",
    alignItems: "flex-start",
    ...e?.cover && {
      objectFit: "cover"
    }
  }),
  /**
   * Estilos para el intersectComponente o para el 'span'
   */
  intersectComponent: () => ({
    display: "inline-block",
    height: "100%",
    width: "100%"
  }),
  scrollIntersectRoot: () => ({
    display: "inline-block"
  }),
  /**
   * Estilos para el contenedor del componente Skeleton.
   */
  divContainerSkeleton: ({ theme: e }) => ({
    height: "100%",
    "&.M4lclassCssSpecificity": {
      backgroundColor: e.vars.palette.skeleton.default,
      display: "flex",
      position: "relative",
      alignItems: "center",
      justifyContent: "center",
      maxWidth: "100%",
      height: "100%",
      width: "100%",
      borderRadius: e.vars.size.baseSpacings.sp1
    }
  }),
  /**
   * Estilos para el Skeleton del componente.
   */
  imgSkeleton: ({ theme: e }) => ({
    display: "flex",
    visibility: "visible",
    color: e.vars.palette.skeleton.default,
    position: "absolute",
    width: "60%",
    height: "60%",
    margin: "auto",
    maxWidth: e.vars.size.baseSpacings.sp10,
    maxHeight: e.vars.size.baseSpacings.sp10,
    minWidth: e.vars.size.desktop.medium.base,
    minHeight: e.vars.size.desktop.medium.base,
    inset: 0
  }),
  skeletonComponent: {}
};
export {
  i as imageStyles
};
