const o = (n) => {
  const { color: i, get: t, spacing: e } = n;
  return {
    ".sidenav": {
      padding: e(2, 4, 2, 4),
      flexDirection: "column",
      borderRightWidth: "1px",
      flexGrow: 1,
      minWidth: "300px",
      display: "none",
      border: "2px solid transparent",
      "@media (min-width: 1024px)": {
        display: "flex"
      }
    },
    ".sidenav-button": {
      padding: e(4),
      display: "flex",
      flexDirection: "row",
      gap: e(3),
      fontSize: t("fontSize.sm"),
      alignItems: "center"
    },
    ".sidenav-header": {
      padding: e(4),
      display: "flex",
      flexDirection: "row",
      gap: e(3),
      color: i("content.primary"),
      fontWeight: 500,
      textTransform: "uppercase"
    },
    ".sidenav-content-border": {
      borderBottomWidth: "1px"
    },
    ".sidenav-content": {
      marginTop: e(12),
      marginBottom: e(6),
      display: "flex",
      flexDirection: "column",
      gap: e(3),
      fontWeight: 500,
      padding: e(0, 6, 0, 6),
      "@media (min-width: 1024px)": {
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "space-between",
        padding: e(0)
      }
    }
  };
}, d = {
  getComponents: o
};
export {
  d as TailwindSideNav
};
