import { getHeightSizeStyles as a } from "../../../../utils/getSizeStyles/getSizeStyles.js";
const t = {
  /**
   * Estilos generales para el checkbox 🟦
   * @param {object} theme - El tema de MUI.
   * @returns {object} - Los estilos aplicados al root del checkbox.
   */
  root: ({ theme: i }) => ({
    display: "flex",
    alignItems: "center",
    outline: "none",
    paddingRight: i.vars.size.baseSpacings.sp1,
    overflow: "visible",
    boxSizing: "border-box",
    gap: i.vars.size.baseSpacings.sp1,
    width: "fit-content"
  }),
  /**
   * Componente MuiCheckBox, FocusVisible para cuando está seleccionado el CheckBox 🟩
   * @param {object} theme - El tema de MUI.
   * @param {object} ownerState - El estado del componente.
   * @returns {object} - Los estilos aplicados al MuiCheckBox.
   */
  muiCheckBox: ({ theme: i, ownerState: e }) => {
    const o = e?.error ? "error" : "primary", r = e?.error ? "error" : "default", s = i.generalSettings.isMobile ? "mobile" : "desktop", l = e?.size ?? "medium";
    return {
      overflow: "visible",
      height: i.vars.size[s][l].action,
      width: i.vars.size[s][l].action,
      borderRadius: i.size.borderRadius.r1,
      "&:hover": {
        backgroundColor: i.vars.palette[r].hoverOpacity
      },
      "&:active": {
        backgroundColor: i.vars.palette[r].activeOpacity
      },
      "&.Mui-checked": {
        "&:hover": {
          backgroundColor: i.vars.palette[o].hoverOpacity,
          "& .M4LIcon-icon": {
            backgroundColor: i.vars.palette[o].hover
          }
        },
        "&:active": {
          backgroundColor: i.vars.palette[o].activeOpacity,
          "& .M4LIcon-icon": {
            backgroundColor: i.vars.palette[o].active
          }
        }
      },
      "&.Mui-focusVisible, &:focus-visible": {
        outline: `1px solid ${i.vars.palette.primary.focusVisible}`
      },
      // Historia Disabled para CheckBox 😶‍🌫️
      ...e?.disabled && {
        pointerEvents: e?.disabled ? "none" : "auto",
        "&:hover": {
          pointerEvents: e?.disabled ? "none" : "auto"
        }
      }
    };
  },
  /**
   * Estilos para el inline-text del CheckBox 📝
   * @param {object} theme - El tema de MUI.
   * @param {object} ownerState - El estado del componente.
   * @returns {object} - Los estilos aplicados al skeletonStyled.
   */
  skeletonStyled: ({ theme: i, ownerState: e }) => {
    const o = i.generalSettings.isMobile ? "mobile" : "desktop", r = e?.size ?? "medium";
    return {
      borderRadius: i.vars.size.borderRadius.r1,
      backgroundColor: i.vars.palette?.skeleton.default,
      "&.checkSkeleton": {
        width: i.vars.size[o][r].action,
        ...a(
          i.generalSettings.isMobile,
          e?.size || "medium",
          "action",
          (s) => ({
            width: s
          })
        ),
        ...a(
          i.generalSettings.isMobile,
          e?.size || "small",
          "action",
          (s) => ({
            width: s
          })
        )
      },
      "&.checkSkeletonInlineText": {
        width: i.vars.size.baseSpacings.sp12,
        borderRadius: i.vars.size.borderRadius.r1,
        ...a(
          i.generalSettings.isMobile,
          e?.size || "medium",
          "base"
        ),
        ...a(
          i.generalSettings.isMobile,
          e?.size || "small",
          "base"
        )
      }
    };
  },
  /**
   * Estilos para el inline-text del CheckBox 📝
   */
  typographyStyled: {},
  /**
   * El estilado de este slot, se hace en muiCheckBox, debido a que el input absorbe los pseudo selectores, entonces hay que hacerlos desde el nodo padre. 🟨
   */
  icon: {},
  /**
   * El estilado de este slot, se hace en muiCheckBox, debido a que el input absorbe los pseudo selectores, entonces hay que hacerlos desde el nodo padre. 🟨
   */
  iconChecked: {}
};
export {
  t as checkBoxStyles
};
