import { Box } from "@mui/material";
import styled from "styled-components";
import { PrimaryButton } from "../../../components/Buttons/PrimaryButton/PrimaryButton";
import Header from "../../../components/MarketPlace/Header/Header";
import SearchField from "../../../components/TextFields/SearchField/SearchField";

export const AdminCategoriesPageContainer = styled(Box)`
  padding: 60px;
  padding-top: 38px;
  min-height: 100vh;
  padding-bottom: 100px;
  position: relative;
  @media (max-width: 600px) {
    padding: 18px;
    min-height: calc(100vh - 72px);
    padding-bottom: 100px;
    top: 65px;
  }
`;
export const AdminCategoriesHeader = styled(Header)`
  /* top: 40px; */
  top: 0;
  @media (min-width: 600px) and (max-width: 900px) {
    & > div:nth-child(2) {
      display: none;
    }
  }
  @media (max-width: 600px) {
    top: 0;
    margin-top: 0px;
    & > div {
      margin-top: 0;
    }
    & > div > div > div {
      top: 25px;
      left: 0;
    }
  }
`;
export const AdminCategoriesSearchField = styled(SearchField)`
  top: -15px;

  @media (max-width: 900px) {
    margin-top: 72px;
  }

  @media (max-width: 600px) {
    display: none;
  }
`;
export const NewCategoryButton = styled(PrimaryButton)`
  position: relative;
  margin-left: auto;
  height: 48px;
  width: 224px;
  & button {
    font-weight: 700;
  }
  @media (max-width: 600px) {
    /* bottom: 18px;
    right: 16px; */
  }
`;
export const CategoriesList = styled(Box)`
  /* padding-top: 10px */
`;
