import { RADIO_CLASSES as s } from "./constants.js";
import { getSizeStyles as t } from "../../../../utils/getSizeStyles/getSizeStyles.js";
const c = {
  /**
   * Estilos generales para el radio button 🟦
   */
  root: ({ theme: r }) => ({
    display: "flex",
    alignItems: "center",
    outline: "none",
    overflow: "visible",
    boxSizing: "border-box",
    gap: r.vars.size.baseSpacings.sp1,
    width: "fit-content",
    cursor: "pointer"
  }),
  /**
   * Componente MuiRadio, FocusVisible para cuando está seleccionado el Radio 🟩
   */
  muiRadio: ({ theme: r, ownerState: o }) => {
    const i = o?.error ? "error" : "primary", e = o?.error ? "error" : "default";
    return {
      hola: 1,
      overflow: "visible",
      ...t(
        r,
        o?.size || "medium",
        "action",
        (a) => ({
          width: a,
          height: a
        })
      ),
      borderRadius: r.size.borderRadius.r4,
      "&:hover": {
        backgroundColor: r.vars.palette[e].hoverOpacity
      },
      "&:active": {
        backgroundColor: r.vars.palette[e].activeOpacity
      },
      "&.Mui-checked": {
        "&:hover": {
          backgroundColor: r.vars.palette[i].hoverOpacity,
          "& .M4LIcon-icon": {
            backgroundColor: r.vars.palette[i].hover
          }
        },
        "&:active": {
          backgroundColor: r.vars.palette[i].activeOpacity,
          "& .M4LIcon-icon": {
            backgroundColor: r.vars.palette[i].active
          }
        }
      },
      "&.Mui-focusVisible, &:focus-visible": {
        outline: `1px solid ${r.vars.palette.primary.focusVisible}`
      },
      ...o?.disabled && {
        pointerEvents: o?.disabled ? "none" : "auto",
        "&:hover": {
          pointerEvents: o?.disabled ? "none" : "auto"
        }
      }
    };
  },
  /**
   * Estilos para el texto inline del Radio 📝
   */
  inlineText: () => ({
    cursor: "inherit"
  }),
  /**
   * Estilos para el skeleton del Radio 📝
   */
  skeleton: ({ theme: r, ownerState: o }) => ({
    borderRadius: r.vars.size.borderRadius.r1,
    backgroundColor: r.vars.palette?.skeleton.default,
    [`&.${s.skeleton}`]: {
      ...t(
        r,
        o?.size || "medium",
        "action",
        (i) => ({
          width: i
        })
      )
    }
  })
};
export {
  c as radioButtonStyles
};
