const e = (i) => {
  const { spacing: n, get: t, color: o } = i;
  return {
    ".menu": {
      borderRadius: n(1),
      boxShadow: t("boxShadow.default"),
      background: o("surface.alt"),
      display: "flex",
      flexDirection: "column",
      alignItems: "stretch"
    },
    ".menu-item": {
      transitionProperty: "background-color",
      transitionDuration: t("transitionDuration.default"),
      transitionTimingFunction: t("transitionTimingFunction.default"),
      padding: n(3, 6),
      "&:hover": {
        backgroundColor: o("interaction.muted.brand.hover"),
        cursor: "pointer"
      },
      "&:focus": {
        backgroundColor: o("interaction.muted.brand.hover"),
        outline: "none"
      }
    },
    ".menu-label": {
      paddingLeft: n(6),
      paddingRight: n(6),
      paddingTop: n(3),
      paddingBottom: n(3),
      fontWeight: 600
    },
    ".menu-divider": {
      height: "1px",
      backgroundColor: o("divider.medium")
    }
  };
}, r = {
  getComponents: e
};
export {
  r as TailwindMenu
};
