import ReactMarkdown from "react-markdown";
import styled from "styled-components";
import colors from "@theme/colors";

const MarkdownStyles = styled(ReactMarkdown)`
  p {
    color: ${colors.black};
  }

  h1, h3 {
    color: ${colors.orange2};
  }

  a {
    color: ${colors.blue1};

    &:hover {
      color: ${colors.lightBlue};
    }
  }

  table {
    tr {
      vertical-align: top;

      td {
        word-break: break-word;
        padding: 8px;
      }

      td:first-of-type {
        word-break: keep-all;
        padding-left: 0;
      }
    }
  }
`;

export default MarkdownStyles;
