import { getTypographyStyles as o } from "../../utils/getTypographyStyles.js";
import { getSizeStyles as t } from "../../utils/getSizeStyles/getSizeStyles.js";
const s = {
  /**
   * Stack the trigger and optional quick-color palette.
   */
  root: ({ theme: r, ownerState: a }) => ({
    display: "flex",
    flexDirection: "column",
    gap: a?.variant === "colorFieldPicker" ? r.vars.size.baseSpacings.sp1 : r.vars.size.baseSpacings["sp0-5"],
    width: a?.variant === "colorFieldPicker" ? "100%" : "fit-content",
    maxWidth: "100%"
  }),
  /**
   * Tint the shared IconButton trigger when the standalone variant is invalid.
   */
  iconButton: ({ theme: r, ownerState: a }) => ({
    borderRadius: "10px!important",
    ...a?.error && {
      backgroundColor: r.vars.palette.error.activeOpacity
    }
  }),
  /**
   * Make the contained trigger look like a field while preserving button semantics.
   */
  textFieldTrigger: ({ theme: r, ownerState: a }) => ({
    width: "100%",
    paddingLeft: 0,
    paddingRight: 0,
    paddingTop: 0,
    paddingBottom: 0,
    border: r.vars.size.borderStroke.actionInput,
    borderColor: a?.disabled ? `${r.vars.palette.border.disabled}!important` : "transparent",
    borderRadius: r.vars.size.borderRadius["r1-5"],
    backgroundColor: a?.error ? r.vars.palette.error.toneOpacity : r.vars.palette.default.enabledOpacity,
    display: "flex",
    alignItems: "center",
    gap: r.vars.size.baseSpacings.sp1,
    boxSizing: "border-box",
    cursor: a?.disabled ? "default" : "pointer",
    textAlign: "left",
    outline: "none",
    appearance: "none",
    transition: "all 0.2s ease",
    ...t(
      r,
      a?.size || "medium",
      "action",
      (i) => ({
        height: "auto",
        minHeight: i
      })
    ),
    "& .M4LColorPicker-textFieldTriggerValue": {
      flex: 1,
      minWidth: 0,
      overflow: "hidden",
      textOverflow: "ellipsis",
      whiteSpace: "nowrap",
      color: a?.disabled ? r.vars.palette.text.disabled : r.vars.palette.text.primary,
      ...o(
        r.generalSettings.isMobile,
        a?.size || "medium",
        "bodyStandard"
      )
    },
    "&:hover": a?.disabled ? void 0 : {
      backgroundColor: a?.error ? r.vars.palette.error.hoverOpacity : r.vars.palette.default.hoverOpacity
    },
    "&:focus-visible": a?.disabled ? void 0 : {
      backgroundColor: r.vars.palette.background.default,
      borderColor: a?.error ? r.vars.palette.error.focus : r.vars.palette.primary.selected,
      boxShadow: `0px 0px 0px 1.5px ${(a?.error ? r.vars.palette.error : r.vars.palette.primary).selectedOpacity} !important`
    },
    ...!a?.disabled && a?.open && {
      backgroundColor: r.vars.palette.background.default,
      borderColor: a?.error ? r.vars.palette.error.focus : r.vars.palette.primary.selected,
      boxShadow: `0px 0px 0px 1.5px ${(a?.error ? r.vars.palette.error : r.vars.palette.primary).selectedOpacity} !important`
    }
  }),
  /**
   * Apply the ColorPicker-specific popover shell treatment around the SketchPicker.
   */
  popover: ({ theme: r, ownerState: a }) => ({
    marginTop: a?.error ? r.vars.size.baseSpacings.sp1 : 0,
    "& .MuiPaper-root": {
      padding: r.vars.size.baseSpacings.sp3,
      border: r.vars.size.borderStroke.container,
      borderColor: a?.error && a?.variant === "colorFieldPicker" ? r.vars.palette.border.error : r.vars.palette.border.secondary,
      borderRadius: `${r.vars.size.borderRadius.r3} !important`,
      "& .MuiButtonBase-root": {
        justifyContent: "center"
      },
      boxShadow: "0 8px 24px -10px rgba(95, 108, 125, 0.16), 0 20px 60px 0 rgba(109, 124, 146, 0.12)"
    }
  }),
  /**
   * Normalize the third-party SketchPicker layout to the M4L theme system.
   */
  sketchPicker: ({ theme: r }) => ({
    display: "flex",
    flexDirection: "column",
    gap: r.vars.size.baseSpacings.sp3,
    boxShadow: "none !important",
    background: `${r.vars.palette.background.default} !important`,
    padding: "0px !important",
    "& > div": {
      "&:nth-of-type(1)": {
        borderRadius: `${r.vars.size.borderRadius.r2} !important`
      },
      "&:nth-of-type(2)": {
        display: "flex !important",
        justifyContent: "center !important",
        alignItems: "center !important",
        gap: r.vars.size.baseSpacings.sp3,
        "& > div:nth-of-type(1)": {
          padding: "0px !important",
          "& > div:nth-of-type(1)": {
            height: `${r.vars.size.baseSpacings.sp3}!important`,
            borderRadius: `${r.vars.size.borderRadius.r1} !important`,
            "& > div > div > div > div": {
              height: "10px !important"
            }
          }
        },
        "& > div:nth-of-type(2)": {
          margin: "0px !important",
          borderRadius: `${r.vars.size.borderRadius.r1} !important`,
          height: `${r.vars.size.desktop.medium.base} !important`,
          width: `${r.vars.size.desktop.medium.base} !important`,
          "& div": {
            borderRadius: `${r.vars.size.borderRadius.r1} !important`,
            boxShadow: "none !important"
          }
        }
      },
      "&:nth-of-type(3)": {
        padding: "0px !important",
        "& > div": {
          "&:nth-of-type(1), &:nth-of-type(2), &:nth-of-type(3), &:nth-of-type(4), &:nth-of-type(5)": {
            padding: "0px !important",
            "& div": {
              display: "flex !important",
              flexDirection: "column-reverse !important",
              "& label": {
                textAlign: "left !important",
                color: `${r.vars.palette.text.secondary} !important`,
                textTransform: "uppercase !important",
                padding: "0px !important"
              },
              "& input": {
                outline: `1px solid ${r.vars.palette.border.secondary}`,
                borderRadius: r.vars.size.borderRadius.r1,
                background: r.vars.palette.background.default,
                color: r.vars.palette.text.primary,
                boxShadow: "none !important",
                "&:hover": {
                  background: r.vars.palette.primary.hoverOpacity
                },
                "&:focus-visible": {
                  outlineColor: r.vars.palette.primary.focusVisible
                },
                "&:active": {
                  outlineColor: r.vars.palette.primary.active
                }
              }
            }
          }
        }
      },
      "&:nth-of-type(4)": {
        paddingTop: "0px !important",
        "& > div > span > div": {
          borderRadius: `${r.vars.size.borderRadius["r1-5"]} !important`,
          borderColor: r.vars.palette.border.secondary
        }
      }
    },
    "& .flexbox-fix": {
      border: "0px !important"
    }
  }),
  /**
   * Keep inline quick colors aligned with the contained-field layout.
   */
  quickColors: ({ theme: r }) => ({
    display: "flex",
    flexWrap: "wrap",
    gap: r.vars.size.baseSpacings["sp0-5"],
    width: "100%"
  })
};
export {
  s as colorPickerStyles
};
