const r = {
  /**
   * Estilos del root principal
   */
  root: ({ theme: e, ownerState: i }) => ({
    display: "flex",
    alignItems: "center",
    gap: e.vars.size.baseSpacings.sp2,
    width: "100%",
    ...!i?.hasDefinedSize && {
      height: "100%"
    }
  }),
  /**
   * Estilos de la imagen
   */
  image: ({ theme: e, ownerState: i }) => ({
    flexShrink: 0,
    borderRadius: e.vars.size.borderRadius.r2,
    border: `1px solid ${e.vars.palette.border.disabled}`,
    ...!i?.hasDefinedSize && {
      height: "90%",
      width: "auto",
      aspectRatio: "1 / 1"
    },
    objectFit: i?.cover ? "cover" : "contain"
  }),
  /**
   * Estilos del texto de la imagen
   */
  textImage: ({ theme: e }) => ({
    overflow: "hidden",
    textOverflow: "ellipsis",
    whiteSpace: "nowrap",
    flex: 1,
    "&.M4LTypography-root": {
      color: e.vars.palette.primary
    }
  })
};
export {
  r as imageFormatterStyles
};
