import styled from "styled-components";
import { Grid, Typography } from "@mui/material";
import selectedTheme from "../../../themes";

export const ProfileStatsContainer = styled(Grid)`
  display: flex;
  justify-content: start;
  align-items: center;
  background: ${selectedTheme.primaryDarkTextSecond};
  width: calc(100% + 2rem);
  padding-top: 1.3rem;
  padding-bottom: 1.3rem;
  margin-bottom: -1rem;
  margin-left: -1rem;
  border-radius: 0 0 4px 4px;
`;
export const ProfileStatsGrid = styled(Grid)`
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
`;
export const StatsItem = styled(Typography)`
  margin-right: 2rem;
  display: unset;
  margin-left: 1rem;
  font-family: "Open Sans";
  font-size: 16px;
  margin-bottom: 2px;
  @media (max-width: 600px) {
    font-size: 12px;
  }
`;
