import { Box } from "@mui/material";
import styled from "styled-components";
import selectedTheme from "../../../themes";
import IconWithNumber from "../../Icon/IconWithNumber/IconWithNumber";
import { ReactComponent as Filter } from "../../../assets/images/svg/filter.svg";


export const OffersContainer = styled(Box)`
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 5px;
  position: relative;
  padding-bottom: 60px;
`;
export const FilterContainer = styled(IconWithNumber)`
  position: absolute;
  top: ${props => props.myOffers ? "126px" : "93px"};
  right: 18px;
  cursor: pointer;
  background-color: ${selectedTheme.offerBackgroundColor} !important;
  & div {
    width: 16px;
    height: 16px;
    background-color: ${selectedTheme.primaryPurple};
    position: absolute;
    top: -5px;
    right: -5px;
    line-height: 15px;
    text-align: center;
  }
  @media (min-width: 600px) {
    display: none;
  }
`;
export const FilterIcon = styled(Filter)`
  background-color: ${selectedTheme.offerBackgroundColor};
`;