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,
  },
})