import { Box } from "@mui/material";
import styled from "styled-components";

export const BoxWrapper = styled(Box)`
  overflow: hidden;
`;

export const StyledComment = styled(Box)`
  display: flex;
  align-items: center;
  margin: 10px 0;
  font-size: 14px;
  line-height: 20px;
  overflow: hidden;
  transition: opacity 0.2s ease-out, height 0.2s ease-out;
`;

export const Avatar = styled((props) => (
  <Box
    component="img"
    {...props}
    alt="avatar"
    width="30"
    height="30"
    src={props.src}
    style={{ marginRight: 5, borderRadius: "50%" }}
  />
))`
  width: 22px;
  height: 22px;
  cursor: pointer;
  margin: 0 10px;
  display: inline-block;
`;
