import { getSizeStyles as a } from "../../../../utils/getSizeStyles/getSizeStyles.js";
import { BUTTON_CLASSES as i } from "./constants.js";
const p = {
  /**
   * Styles for the root element of the button component.
   */
  buttonRoot: ({ theme: t, ownerState: o }) => {
    const l = {
      boxShadow: `inset 0px 0px 0px 1px ${t.vars.palette.primary.focusVisible}`
    };
    return {
      // Configuración general
      display: "flex",
      flexWrap: "nowrap",
      alignItems: "center",
      gap: t.vars.size.baseSpacings.sp1,
      padding: `0px ${t.vars.size.baseSpacings.sp2}`,
      borderRadius: t.vars.size.borderRadius["r1-5"],
      maxWidth: "200px",
      minWidth: "0",
      flexShrink: 0,
      border: "unset!important",
      // Tamaño de altura
      ...a(
        t,
        o?.size || "medium",
        "action",
        (e) => ({
          height: "auto!important",
          minHeight: e
        })
      ),
      // Variante Contained
      ...o?.variant === "contained" && {
        backgroundColor: o?.paletteColor?.enabled,
        boxShadow: "unset",
        // Color del texto
        [`&&& .${i.textButton}`]: {
          ...o?.color === "default" && {
            color: t.vars.palette.text.primary
          },
          ...o?.color !== "default" && {
            color: o?.paletteColor?.contrastText
          }
        },
        // Color de los adornos laterales
        "&&& .M4LIcon-icon": {
          ...o?.color === "default" && {
            backgroundColor: t.vars.palette.text.primary
          },
          ...o?.color !== "default" && {
            backgroundColor: o?.paletteColor?.contrastText
          }
        },
        // Estado Hover
        "&:hover": {
          backgroundColor: o?.paletteColor?.hover,
          boxShadow: "unset"
        },
        // Estado Active
        "&:active": {
          backgroundColor: o?.paletteColor?.active,
          boxShadow: "unset"
        },
        // Estado focus visible
        "&:focus-visible": {
          backgroundColor: o?.paletteColor?.active,
          ...l
        }
      },
      // Variante Outlined
      ...o?.variant === "outlined" && {
        "&&&": {
          // Borde
          ...o?.color === "default" ? {
            outline: `1px solid ${t.vars.palette.border.default}`,
            outlineOffset: "-1px"
          } : {
            outline: `1px solid ${o?.paletteColor?.enabled}`,
            outlineOffset: "-1px"
          },
          // Color del texto
          [`& .${i.textButton}`]: {
            ...o?.color === "default" ? {
              color: t.vars.palette.text.primary
            } : {
              color: o?.paletteColor?.semanticText
            }
          },
          // Color de los adornos laterales
          "& .M4LIcon-icon": {
            backgroundColor: o?.paletteColor?.semanticText
          },
          // Estado Hover
          "&:hover": {
            backgroundColor: o?.paletteColor?.hoverOpacity,
            outline: `1px solid ${o?.paletteColor?.hover}`,
            outlineOffset: "-1px",
            boxShadow: "unset"
          }
        },
        // Estado Active
        "&&&:active": {
          backgroundColor: o?.paletteColor?.activeOpacity,
          outline: `1px solid ${o?.paletteColor?.active}`,
          outlineOffset: "-1px"
        },
        // Estado focus visible
        "&:focus-visible": {
          backgroundColor: o?.paletteColor?.activeOpacity,
          outline: "unset!important",
          //efecto de selección
          ...l
        }
      },
      // Variante Text
      ...o?.variant === "text" && {
        "&&&": {
          backgroundColor: "unset",
          outline: "unset",
          // Color del texto
          [`& .${i.textButton}`]: {
            color: o?.paletteColor?.semanticText
          },
          // Color de los adornos laterales
          "& .M4LIcon-icon": {
            backgroundColor: o?.paletteColor?.semanticText
          },
          // Estado Hover
          "&:hover": {
            backgroundColor: o?.paletteColor?.hoverOpacity,
            boxShadow: "unset"
          },
          // Estado Active
          "&:active": {
            backgroundColor: o?.paletteColor?.activeOpacity
          },
          // Estado focus visible
          "&:focus-visible": {
            backgroundColor: o?.paletteColor?.activeOpacity,
            //efecto de selección
            ...l
          }
        }
      },
      // Estado deshabilitado
      "&:disabled": {
        "&&&": {
          backgroundColor: "unset",
          // Color del texto
          [`& .${i.textButton}`]: {
            color: t.vars.palette.text.disabled
          },
          // Color de los adornos laterales
          "& .M4LIcon-icon": {
            backgroundColor: t.vars.palette.text.disabled
          }
        }
      },
      // Overrides
      "& span": {
        margin: "0px"
      },
      // Configuración de achura completa
      ...o?.fullWidth && {
        width: "100%",
        maxWidth: "unset",
        minWidth: "unset"
      }
    };
  },
  /**
   * Styles for the text of the button component.
   */
  textButton: ({ theme: t, ownerState: o }) => ({
    cursor: o?.disabled ? "not-allowed" : "pointer",
    ...t.typography.bodyDens,
    display: "block",
    width: "100%",
    minWidth: "0",
    whiteSpace: "nowrap",
    overflow: "hidden",
    textOverflow: "ellipsis",
    paddingLeft: t.vars.size.baseSpacings.sp1,
    paddingRight: t.vars.size.baseSpacings.sp1,
    "&.MuiButton-label": {
      width: "100%",
      minWidth: "0",
      display: "block",
      overflow: "hidden",
      textOverflow: "ellipsis"
    }
  }),
  /**
   * Styles for the skeleton button component.
   */
  skeletonButton: ({ theme: t, ownerState: o }) => ({
    "&&&": {
      width: "100%",
      background: t.vars.palette.skeleton.default,
      ...a(
        t,
        o?.size || "medium",
        "action",
        (l) => ({
          height: l,
          minHeight: l
        })
      )
    }
  }),
  buttonIcon: {}
};
export {
  p as buttonStyles
};
