const r = (i) => {
  const { spacing: o, get: n, color: t } = i;
  return {
    ".menu": {
      borderRadius: o(1),
      boxShadow: n("boxShadow.default"),
      background: t("surface.alt"),
      display: "flex",
      flexDirection: "column",
      alignItems: "stretch"
    },
    ".menu-item": {
      transitionProperty: "background-color",
      transitionDuration: n("transitionDuration.default"),
      transitionTimingFunction: n("transitionTimingFunction.default"),
      padding: o(3, 6),
      "&:hover": {
        backgroundColor: t("grey.10")
      }
    }
  };
}, a = {
  getComponents: r
};
export {
  a as TailwindMenu
};
