import { styled as i } from "../Theme/index.js";
const o = i("nav", {
  shouldForwardProp: (n) => n !== "$bgColor" && n !== "$textColor"
})(({ $textColor: n, theme: t }) => ({
  position: "relative",
  padding: "0 16px",
  minWidth: "50px",
  // FIXME: @zhanghan 这个只是临时的解决方案，会导致 header align right 不能真正的右对齐，需要修改 header 才能真正解决这个问题
  flexGrow: 100,
  color: n,
  fontSize: "16px",
  "&.navmenu--inline": {
    backgroundColor: t.palette.background.paper
  }
})), r = i("ul")(() => ({
  listStyle: "none",
  margin: 0,
  padding: 0,
  display: "flex",
  alignItems: "center",
  // inline 布局
  "&.navmenu-root--inline ": {
    flexDirection: "column",
    alignItems: "stretch"
  }
})), a = i("li", {
  shouldForwardProp: (n) => n !== "$activeTextColor"
})(({ $activeTextColor: n, theme: t }) => ({
  display: "flex",
  alignItems: "center",
  position: "relative",
  padding: "8px 12px",
  whiteSpace: "nowrap",
  cursor: "pointer",
  transition: t.transitions.create("color", {
    duration: t.transitions.duration.standard
  }),
  WebkitTapHighlightColor: "transparent",
  // 禁用触摸反馈
  // 间距调整
  "&:first-of-type": {
    paddingLeft: 0
  },
  "&:last-of-type": {
    paddingRight: 0
  },
  // 内部链接
  a: {
    whiteSpace: "nowrap",
    color: "inherit",
    textDecoration: "none",
    // 扩大点击区域
    "&::before": {
      position: "absolute",
      top: 0,
      right: 0,
      bottom: 0,
      left: 0,
      backgroundColor: "transparent",
      content: '""'
    }
  },
  // 图标
  ".navmenu-item__icon": {
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    marginRight: "4px",
    "& > *": {
      width: "22px",
      height: "22px",
      maxHeight: "22px",
      fontSize: "1.5em"
    }
  },
  // 右侧内容
  ".navmenu-item__content": {
    height: "32px",
    display: "flex",
    flexDirection: "column",
    justifyContent: "center",
    alignItems: "flex-start",
    gap: "5px"
  },
  ".navmenu-item__label": {
    display: "flex",
    alignItems: "center",
    "&-arrow": {
      marginLeft: "6px",
      fontSize: "14px",
      opacity: 0,
      transition: t.transitions.create("opacity", {
        duration: t.transitions.duration.standard
      })
    }
  },
  ".navmenu-item__desc": {
    fontSize: "14px"
  },
  // 悬停状态下
  "&:hover": {
    color: n
  },
  // 选中状态下
  "&.navmenu-item--active": {
    color: n
  },
  // Panel 形态下
  "&.navmenu-item--panel": {
    padding: "8px 16px",
    borderRadius: "8px",
    ".navmenu-item__icon": {
      flexShrink: 0,
      width: "32px",
      height: "32px",
      marginRight: "16px",
      border: "1px solid",
      borderColor: t.palette.grey[200],
      borderRadius: "4px",
      color: t.palette.grey[500]
    },
    ".navmenu-item__label": {
      fontSize: "14px",
      lineHeight: 1,
      color: t.palette.text.primary
    },
    ".navmenu-item__desc": {
      fontSize: "12px",
      lineHeight: 1,
      color: t.palette.text.secondary
    },
    "&:hover": {
      background: t.palette.action.hover,
      transition: t.transitions.create("background", {
        duration: t.transitions.duration.standard
      }),
      ".navmenu-item__label-arrow": {
        opacity: 1
      },
      ".navmenu-item__desc": {
        color: t.palette.text.primary,
        transition: t.transitions.create("color", {
          duration: t.transitions.duration.standard
        })
      }
    },
    "&.navmenu-item--active": {
      background: t.palette.action.hover
    },
    // Force clear hover state when not actually hovering
    "&:not(:hover).navmenu-item--active": {
      background: "transparent",
      transition: t.transitions.create("background", {
        duration: t.transitions.duration.standard
      })
    }
  },
  // inline 布局中
  "&.navmenu-item--inline": {
    margin: 0,
    padding: "0 16px",
    minHeight: "48px",
    lineHeight: "48px",
    flexWrap: "wrap"
  }
})), s = i(a)(({ theme: n }) => ({
  ".navmenu-item": {
    marginLeft: 0,
    overflow: "hidden"
  },
  "& .navmenu-sub__container": {
    pointerEvents: "none",
    opacity: 0,
    position: "absolute",
    top: "100%",
    left: 0,
    zIndex: 1
  },
  "&.navmenu-sub--opened > .navmenu-sub__container": {
    pointerEvents: "auto",
    opacity: 1,
    transition: n.transitions.create("opacity", {
      duration: n.transitions.duration.standard,
      easing: n.transitions.easing.easeOut
    })
  },
  // 扩展图标
  ".navmenu-sub__expand-icon": {
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    marginLeft: "8px",
    "& > *": {
      width: "0.8em",
      height: "0.8em",
      transition: n.transitions.create("transform", {
        duration: n.transitions.duration.standard
      })
    },
    ".navmenu-item--inline &": {
      marginLeft: "auto"
    }
  },
  // inline 布局
  "&.navmenu-item--inline": {
    ".navmenu-sub__container": {
      position: "static",
      transform: "none",
      flex: "1 0 100%",
      margin: "0 -16px",
      padding: 0,
      height: 0,
      overflow: "hidden",
      transition: n.transitions.create("height", {
        duration: n.transitions.duration.standard
      })
    },
    "&.navmenu-sub--opened > .navmenu-sub__container": {
      height: "auto"
    },
    ".navmenu-sub__list": {
      padding: 0,
      paddingLeft: "16px",
      boxShadow: "none"
    },
    ".navmenu-item__content": {
      height: "48px"
    }
  }
})), d = i("ul")(({ theme: n }) => ({
  margin: 0,
  padding: "16px",
  borderRadius: "4px",
  backgroundColor: n.palette.background.paper,
  "& .navmenu-item + .navmenu-item": {
    marginTop: "8px"
  }
}));
export {
  a as NavMenuItem,
  r as NavMenuRoot,
  o as NavMenuStyled,
  s as NavMenuSub,
  d as NavMenuSubList
};
