import styled from "styled-components";
import { Grid, Typography } from "@mui/material";
import { ReactComponent as Location } from "../../../../assets/images/svg/location.svg";
import { ReactComponent as Mail } from "../../../../assets/images/svg/mail.svg";
import { ReactComponent as Globe } from "../../../../assets/images/svg/globe.svg";
import selectedTheme from "../../../../themes";

export const ProfileContactContainer = styled(Grid)`
  padding-top: ${(props) => (props.isAdmin ? `20px` : `2rem`)};
  padding-bottom: 2rem;
  @media (max-width: 600px) {
    padding-bottom: 1rem;
    padding-top: 88px;
    gap: 5px;
    width: calc(100vw - 216px);
  }
`;
export const LocationIcon = styled(Location)`
  height: 22px;
  width: 22px;
  & path {
    stroke: ${(props) =>
      props.isMyProfile
        ? selectedTheme.colors.iconMineProfileColor
        : selectedTheme.colors.iconProfileColor};
  }
  @media (max-width: 600px) {
    width: 14px;
    height: 14px;
  }
`;
export const ContactItem = styled(Typography)`
  margin-right: 2rem;
  margin-left: 0.4rem;
  color: ${(props) =>
    props.isMyProfile ? "white" : selectedTheme.colors.primaryDarkText};
  display: unset;
  font-family: ${selectedTheme.fonts.textFont};
  letter-spacing: 0.02em;
  font-size: 16px;
  position: relative;
  bottom: 1px;
  @media (max-width: 600px) {
    font-size: 14px;
    bottom: 4px;
    margin-right: 0;
  }
`;
export const MailIcon = styled(Mail)`
  height: 24px;
  width: 24px;
  & path {
    stroke: ${(props) =>
      props.isMyProfile
        ? selectedTheme.colors.iconMineProfileColor
        : selectedTheme.colors.iconProfileColor};
  }
  @media (max-width: 600px) {
    width: 14px;
    height: 14px;
  }
`;
export const GlobeIcon = styled(Globe)`
  height: 22px;
  width: 22px;
  & path {
    stroke: ${(props) =>
      props.isMyProfile
        ? selectedTheme.colors.iconMineProfileColor
        : selectedTheme.colors.iconProfileColor};
  }
  @media (max-width: 600px) {
    width: 14px;
    height: 14px;
  }
`;