import { styled } from "../stitches.config";
import Heading from "./Heading";
import Text from "./Text";

const PanelBox = styled("div", {
  display: "flex",
  flexDirection: "column",
  border: "1px solid $colors$mauve6",
  backgroundColor: "$mauve2",
  padding: "$3",
  borderRadius: "$sm",
  fontWeight: "lighter",
  height: "auto",
  cursor: "pointer",
  flex: "1 1 0px",
  "&:hover": {
    border: "1px solid $colors$mauve9",
  },
  [`& ${Heading}`]: {
    fontWeight: "lighter",
    mb: "$2",
  },
  [`& ${Text}`]: {
    fontWeight: "lighter",
    color: "$mauve10",
    fontSize: "$sm",
  },
});

export default PanelBox;