const a = {
  /**
   * Slots para estilizar el `root` del componente
   */
  root: ({ theme: s, ownerState: i }) => ({
    //overrides
    color: s.vars.palette[i?.color || "primary"].enabled,
    //Sizes
    ...i?.size === "small" && {
      ...s.generalSettings.isMobile ? {
        height: `${s.vars.size.mobile.small.base} !important`,
        width: `${s.vars.size.mobile.small.base} !important`
      } : {
        height: `${s.vars.size.desktop.small.base} !important`,
        width: `${s.vars.size.desktop.small.base} !important`
      }
    },
    ...i?.size === "medium" && {
      ...s.generalSettings.isMobile ? {
        height: `${s.vars.size.mobile.medium.base} !important`,
        width: `${s.vars.size.mobile.medium.base} !important`
      } : {
        height: `${s.vars.size.desktop.medium.base} !important`,
        width: `${s.vars.size.desktop.medium.base} !important`
      }
    }
  }),
  /**
   * Slots para estilar el `skeleton` del componente
   */
  skeleton: ({ theme: s, ownerState: i }) => ({
    "&.M4lclassCssSpecificity": {
      //Sizes
      ...i?.size === "small" && {
        ...s.generalSettings.isMobile ? {
          height: s.vars.size.mobile.small.base,
          width: s.vars.size.mobile.small.base
        } : {
          height: s.vars.size.desktop.small.base,
          width: s.vars.size.desktop.small.base
        }
      },
      ...i?.size === "medium" && {
        ...s.generalSettings.isMobile ? {
          height: s.vars.size.mobile.medium.base,
          width: s.vars.size.mobile.medium.base
        } : {
          height: s.vars.size.desktop.medium.base,
          width: s.vars.size.desktop.medium.base
        }
      }
    }
  })
};
export {
  a as circularProgressStyles
};
