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


export const LocationContainer = styled(Box)`
  display: flex;
  flex-direction: row;
  gap: 2px;
  @media (max-width: 600px) {
    display: none;
  }
`;

export const LocationIconContainer = styled(Box)`
  height: 12px;
  width: auto;
  position: relative;
`;

export const XSText = styled(Typography)`
  font-family: ${selectedTheme.fonts.textFont};
  color: ${selectedTheme.colors.primaryText};
  line-height: 16px;
  font-size: 14px;
  position: relative;
`;

export const LocationIcon = styled(Location)`
  height: 12px;
  width: 12px;
`;