adds hit testing for hovers

components/code-panel/code-docs.tsx

@@ -0,0 +1,101 @@
+import styled from "styles"
+
+export default function CodeDocs({ isHidden }: { isHidden: boolean }) {
+  return (
+    <StyledDocs isHidden={isHidden}>
+      <h2>Docs</h2>
+    </StyledDocs>
+  )
+}
+
+const StyledDocs = styled("div", {
+  position: "absolute",
+  backgroundColor: "$panel",
+  top: 0,
+  left: 0,
+  width: "100%",
+  height: "100%",
+  padding: 16,
+  font: "$docs",
+  overflowY: "scroll",
+  userSelect: "none",
+  paddingBottom: 64,
+
+  variants: {
+    isHidden: {
+      true: {
+        visibility: "hidden",
+      },
+      false: {
+        visibility: "visible",
+      },
+    },
+  },
+
+  "& ol": {},
+
+  "& li": {
+    marginTop: 8,
+    marginBottom: 4,
+  },
+
+  "& code": {
+    font: "$mono",
+  },
+
+  "& hr": {
+    margin: "32px 0",
+    borderColor: "$muted",
+  },
+
+  "& h2": {
+    margin: "24px 0px",
+  },
+
+  "& h3": {
+    fontSize: 20,
+    margin: "48px 0px 32px 0px",
+  },
+
+  "& h3 > code": {
+    fontWeight: 600,
+    font: "$monoheading",
+  },
+
+  "& h4": {
+    margin: "32px 0px 0px 0px",
+  },
+
+  "& h4 > code": {
+    font: "$monoheading",
+    fontSize: 16,
+    userSelect: "all",
+  },
+
+  "& h4 > code > i": {
+    fontSize: 14,
+    color: "$muted",
+  },
+
+  "& pre": {
+    backgroundColor: "$bounds_bg",
+    padding: 16,
+    borderRadius: 4,
+    userSelect: "all",
+    margin: "24px 0",
+  },
+
+  "& p > code, blockquote > code": {
+    backgroundColor: "$bounds_bg",
+    padding: "2px 4px",
+    borderRadius: 2,
+    color: "$code",
+  },
+
+  "& blockquote": {
+    backgroundColor: "rgba(144, 144, 144, .05)",
+    padding: 12,
+    margin: "20px 0",
+    borderRadius: 8,
+  },
+})