import { getSizeStyles as r } from "../../utils/getSizeStyles/getSizeStyles.js";
const n = {
  /**
   * Root styles for the color selector container.
   */
  root: ({ theme: i, ownerState: t }) => ({
    // Basic structure and layout
    display: "inline-flex",
    alignItems: "center",
    justifyContent: "center",
    // Spacing
    padding: 0,
    boxSizing: "border-box",
    // Border radius
    borderRadius: "9px",
    ...r(i, t?.size || "medium", "action", (o) => ({
      width: o,
      minWidth: o,
      height: o,
      minHeight: o
    })),
    outline: i.vars.size.borderStroke.container,
    outlineColor: i.vars.palette.border.secondary,
    outlineOffset: "-4px"
  }),
  /**
   * Swatch styles for the rendered color value.
   */
  color: ({ theme: i, ownerState: t }) => ({
    // General styles
    display: "block",
    flexShrink: 0,
    color: t?.value,
    ...r(i, t?.size || "medium", "base", (o) => ({
      width: o,
      minWidth: o,
      height: o,
      minHeight: o
    })),
    "& path": {
      fill: "currentColor"
    },
    variants: []
  }),
  /**
   * Fallback icon styles for the empty Color preview state.
   */
  icon: ({ theme: i }) => ({
    "& .M4LIcon-icon": {
      backgroundColor: i.vars.palette.text.primary
    }
  })
};
export {
  n as colorStyles
};
