const n = (e) => {
  const { get: t, spacing: r, color: o } = e;
  return {
    ".radio": {
      flexShrink: 0,
      height: r(4),
      width: r(4),
      cursor: "pointer",
      appearance: "none",
      borderRadius: "50%",
      borderColor: o("interaction.support.unselected"),
      borderWidth: r(0.5),
      transitionProperty: "border-color, border-width, background-color, box-shadow",
      transitionDuration: t("transitionDuration.default"),
      transitionTimingFunction: t("transitionTimingFunction.default"),
      "&:focus": {
        boxShadow: "none"
      },
      "&:hover:not(:disabled)": {
        backgroundColor: o("interaction.success-subtle"),
        boxShadow: `0 0 2px ${o("interaction.success-subtle")}`
      },
      '&:checked,&[aria-checked="true"]': {
        borderColor: o("interaction.success"),
        borderWidth: r(1)
      },
      "&:disabled": {
        borderWidth: r(1),
        borderColor: o("interaction.support.disabled.subtle"),
        backgroundColor: o("interaction.support.disabled.subtle"),
        "&:checked": {
          backgroundColor: o("interaction.support.disabled.strong")
        },
        '&[aria-checked="true"]': {
          backgroundColor: o("interaction.support.disabled.strong")
        }
      }
    }
  };
}, i = {
  getComponents: n
};
export {
  i as TailwindRadioComponents,
  n as getComponents
};
