import { getSizeStyles as i } from "../../../../utils/getSizeStyles/getSizeStyles.js";
import { getIconButtonColors as l } from "./helpers/getIconButtonColors.js";
const d = {
  /**
   * 🔘 Estilos generales para el componente IconButton
   * Define la apariencia base y todos los estados interactivos
   */
  styledMUIIconButton: ({ ownerState: o, theme: c }) => {
    const r = o?.disabled ? c.vars.palette.default : c.vars.palette[o?.color || "default"];
    return {
      "&&&": {
        // 🔧 Triple & para aumentar la especificidad CSS
        overflow: "hidden",
        cursor: o?.disabled ? "not-allowed" : "pointer",
        color: c.vars.palette.text.primary,
        borderRadius: c.size.borderRadius["r1-5"],
        pointerEvents: o?.disabled ? "none" : "auto",
        display: o?.isSkeleton ? "none" : "flex",
        justifyContent: "center",
        padding: 0,
        // 🖼️ Estilos para el icono dentro del botón
        "&&& .M4LIcon-icon": {
          backgroundColor: o?.variant === "contained" ? r.contrastText : r.semanticText
        },
        // 🔍 Estado Focus-visible
        "&:focus-visible": {
          outline: c.vars.size.borderStroke.container,
          outlineColor: c.vars.palette.default.focusVisible,
          outlineOffset: "-1px",
          ...o?.variant === "outline" && {
            backgroundColor: r.hoverOpacity
          },
          ...o?.variant === "text" && {
            backgroundColor: r.hoverOpacity
          }
        },
        "&:-webkit-any-link:focus-visible": {
          outline: c.vars.size.borderStroke.container,
          outlineColor: c.vars.palette.default.focusVisible,
          outlineOffset: "-1px"
        },
        /**
         * ✅ ESTADO SELECCIONADO
         * Maneja la apariencia cuando el botón está seleccionado (selected=true)
         */
        ...o?.selected === !0 ? {
          // Estilos para la variante contained
          ...o?.variant === "contained" && {
            // 🎯 Color de fondo según variante y color del componente
            backgroundColor: o?.variant === "contained" ? o?.color === "error" ? r.active : o?.color === "default" ? c.vars.palette.primary.selected : o?.color === "success" ? c.vars.palette.success.selected : r.selected : o?.color === "error" ? r.activeOpacity : r.selectedOpacity,
            "&&& .M4LIcon-icon": {
              backgroundColor: o?.variant === "contained" ? c.vars.palette.primary.contrastText : r.semanticText
            }
          },
          // Estilos para la variante text
          ...o.variant === "outline" && {
            backgroundColor: o.color === "default" ? c.vars.palette.primary.selectedOpacity : r.selectedOpacity,
            border: c.vars.size.borderStroke.actionInput,
            borderColor: o.color === "default" ? c.vars.palette.primary.active : r.active,
            "&&& .M4LIcon-icon": {
              backgroundColor: o.color === "default" ? c.vars.palette.primary.semanticText : o.color === "warning" ? r.active : r.selected
            }
          },
          ...o.variant === "text" && {
            backgroundColor: o.color === "default" ? c.vars.palette.primary.selectedOpacity : r.selectedOpacity,
            "&&& .M4LIcon-icon": {
              backgroundColor: o.color === "default" ? c.vars.palette.primary.semanticText : o.color === "warning" ? r.active : r.selected
            }
          }
        } : {
          /**
           * 🔄 ESTADO NORMAL (NO SELECCIONADO)
           * Define estilos para los diferentes estados y variantes cuando no está seleccionado
           */
          /**
           * 📝 VARIANTE TEXT
           * Apariencia base y estados interactivos para la variante text
           */
          ...o?.variant === "text" && {
            "&&& .M4LIcon-icon": {
              backgroundColor: r.semanticText
            },
            // 🖱️ Estado Hover
            "&:hover": {
              backgroundColor: r.hoverOpacity,
              "&&& .M4LIcon-icon": {}
            },
            // 👇 Estado Active
            "&:active": {
              backgroundColor: r.activeOpacity,
              "&&& .M4LIcon-icon": {
                backgroundColor: o?.color === "default" ? r.semanticText : r.active
              }
            }
          },
          /**
           * ⚪ VARIANTE OUTLINE
           * Apariencia base y estados interactivos para la variante outline
           */
          ...o?.variant === "outline" && {
            // 🖋️ Borde diferente según el color del componente
            ...o?.color !== "default" && {
              border: `1px solid ${r.enabled}`
            },
            ...o?.color === "default" && {
              border: `1px solid ${c.vars.palette.border.default}`
            },
            // 🖱️ Estado Hover
            "&:hover": {
              background: r.hoverOpacity,
              border: o.color === "default" ? `1px solid ${c.vars.palette.border.default}` : `1px solid ${r.hover}`,
              "&&& .M4LIcon-icon": {}
            },
            // 👇 Estado Active
            "&:active": {
              background: r.activeOpacity,
              border: o.color === "default" ? `1px solid ${c.vars.palette.border.default}` : `1px solid ${r.active}`,
              "&&& .M4LIcon-icon": {
                backgroundColor: o?.color === "default" ? r.semanticText : r.active
              }
            }
          },
          /**
           * 🔵 VARIANTE CONTAINED
           * Apariencia base y estados interactivos para la variante contained
           */
          ...o?.variant === "contained" && {
            backgroundColor: r.enabled,
            // 🖼️ Color del icono
            "&&& .M4LIcon-icon": {
              backgroundColor: o?.color === "default" ? r.semanticText : r.contrastText
            },
            // 🖱️ Estado Hover
            "&:hover": {
              background: r.hover
            },
            // 👇 Estado Active
            "&:active": {
              background: r.active
            }
          }
        },
        /**
         * 🚫 ESTADO DISABLED
         * Estilos específicos para cuando el botón está deshabilitado
         */
        ...o?.disabled === !0 && {
          "&&& .M4LIcon-icon": {
            color: c.vars.palette.text.disabled
          }
        },
        /**
         * 📏 TAMAÑOS DEL COMPONENTE
         * Aplica dimensiones según el tamaño especificado (small, medium, large)
         */
        ...i(
          c,
          o?.size || "medium",
          "action",
          (a) => ({
            width: a,
            height: a
          })
        ),
        // 🔲 Estilos para el imagen dentro del botón
        "&&& .M4LImage-root": {
          width: "100%",
          height: "100%",
          objectFit: "cover"
        }
      }
    };
  },
  /**
   * 🏷️ Estilos para el badge del IconButton
   * Actualmente no implementado, pendiente de documentación en Figma
   */
  badgeIconButton: {},
  /**
   * ⌛ Estilos para el estado skeleton del IconButton
   * Aplicados cuando se muestra un esqueleto de carga
   */
  skeleton: ({ theme: o, ownerState: c }) => ({
    "&.M4lclassCssSpecificity": {
      ...i(
        o,
        c?.size || "medium",
        "action",
        (r) => ({
          width: r,
          height: r
        })
      )
    }
  }),
  /**
   * 🎭 Estilos específicos para el icono dentro del IconButton
   * Personaliza el color del icono según el estado del botón
   */
  icon: ({ theme: o, ownerState: c }) => {
    const { iconColor: r } = l(o, c);
    return {
      '& [class*="M4LIcon-icon"]': {
        backgroundColor: r
      }
    };
  }
};
export {
  d as iconButtonStyles
};
