const i = {
  /**
   * Styles for the root element. Gap between title (label) and radios: sp0-5 by default; sp2 when options have images/icons (hasStartAdornment).
   * containerType: inline-size when hasStartAdornment so the radio group can use container queries to wrap columns when narrow.
   */
  root: ({ theme: e, ownerState: r }) => {
    const n = r;
    return {
      display: "flex",
      flexDirection: "column",
      height: "fit-content",
      gap: n?.hasStartAdornment ? e.vars.size.baseSpacings.sp3 : e.vars.size.baseSpacings["sp0-5"],
      width: "100%",
      ...n?.hasStartAdornment && { containerType: "inline-size" }
    };
  },
  /**
   * Styles for the `RadioGroup` element. Gap sp1 when text-only; gap sp2 when options have images/icons (hasStartAdornment).
   * When rowColumns is set: uses that many columns; only when the container is narrow (container query) switches to 1 column so options wrap.
   */
  radioGroup: ({ theme: e, ownerState: r }) => {
    const n = r, t = n?.hasStartAdornment ? e.vars.size.baseSpacings.sp3 : e.vars.size.baseSpacings.sp1, o = typeof n?.rowColumns == "number" && n.rowColumns > 0 ? n.rowColumns : 0;
    return o > 0 ? {
      display: "grid",
      gridTemplateColumns: `repeat(${o}, 1fr)`,
      gap: t,
      "@container (max-width: 300px)": {
        gridTemplateColumns: "1fr"
      }
    } : { gap: t };
  },
  /**
   * Styles for the `OptionWrapper` element. Gap uses sp1-5 token (6px).
   * Single row per option (radio + adornment + label); wrapping is done at the radio-group level.
   */
  optionWrapper: ({ theme: e }) => ({
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    gap: e.vars.size.baseSpacings["sp1-5"]
  }),
  /**
   * Wrapper for the start adornment (icon/image). Fixed size so icons render small and consistent.
   */
  optionStartAdornment: () => ({
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    flexShrink: 0
  }),
  /**
   * Styled wrapper for Image when adornment is a URL. 24x24, borderRadius r2, shadow, overflow hidden.
   */
  optionStartAdornmentImage: ({ theme: e }) => ({
    display: "block",
    flexShrink: 0,
    objectFit: "cover",
    borderRadius: e.vars?.size?.borderRadius?.r2 ?? "8px",
    overflow: "hidden"
  }),
  /**
   * Label text between icon and radio (used when start adornment is present).
   * Typography (variant body). Color is set via the color prop from getOptionLabelColor(checked, disabled).
   */
  optionLabel: () => ({
    display: "flex",
    alignItems: "center",
    flex: 1,
    minWidth: 0,
    cursor: "pointer"
  }),
  /**
   * Wrapper around the radio so it never shrinks and stays visible.
   */
  optionControl: () => ({
    display: "flex",
    alignItems: "center",
    flexShrink: 0
  })
};
export {
  i as rhfRadioGroupStyles
};
