const o = {
  /**
   * Estilos para el componente Button de M4L.
   * Componente boton con variantes y paletas de colores.
   */
  root: ({ ownerState: i }) => ({
    ...i?.loading && {
      "&>.MuiTypography-root": {
        visibility: "hidden"
      },
      "&>.MuiButton-icon": {
        visibility: "hidden"
      }
    }
  }),
  /**
   * Estilos para la versión esquelética del botón.
   * Incluye tamaños responsivos para diferentes anchos de pantalla y tamaños de botón.
   */
  skeletonLoadingButton: ({ theme: i, ownerState: s }) => ({
    width: "100%",
    background: i.vars.palette.skeleton.default,
    // Styles for small size skeleton
    ...s?.size === "small" && {
      ...i.generalSettings.isMobile ? {
        height: i.vars.size.mobile.small.action,
        minHeight: i.vars.size.mobile.small.action
      } : {
        height: i.vars.size.desktop.small.action,
        minHeight: i.vars.size.desktop.small.action
      }
    },
    // Styles for medium size skeleton
    ...s?.size === "medium" && {
      ...i.generalSettings.isMobile ? {
        height: i.vars.size.mobile.medium.action,
        minHeight: i.vars.size.mobile.medium.action
      } : {
        height: i.vars.size.desktop.medium.action,
        minHeight: i.vars.size.desktop.medium.action
      }
    }
  }),
  /**
   * Estilos para el componente CircularProgress.
   * Posiciona el cargador dentro del botón y aplica un color consistente.
   */
  circularProgress: ({ theme: i, ownerState: s }) => ({
    position: "absolute",
    color: s?.color === "default" ? i.vars.palette.text.disabled : i.vars.palette[s?.color || "default"].enabled
  })
};
export {
  o as loadingButtonStyles
};
