import { formLabelClasses } from '@mui/material/FormLabel';
import { inputBaseClasses } from '@mui/material/InputBase';
import { styled } from '../../components/styled';
import { formFiltersClassnames } from './constants';
export const Wrapper = styled.div `
  display: flex;
  gap: ${({ theme }) => theme.spacing(2)};
  justify-content: space-between;

  width: 100%;
  margin-top: ${({ theme }) => theme.spacing(4)};

  .${formLabelClasses.root} {
    display: none;
  }

  ${({ theme }) => theme.breakpoints.down('laptop')} {
    margin-top: 0;
    padding-right: ${({ theme }) => theme.spacing(2)};
  }

  ${({ theme }) => theme.breakpoints.down('sm')} {
    padding: ${({ theme }) => theme.spacing(1, 4, 5, 4)};

    font-size: 0;

    .${inputBaseClasses.input} {
      padding: ${({ theme }) => theme.spacing(2, 3)};
    }

    .${formFiltersClassnames.submitButton} {
      display: none;
    }
  }
`;
export const MainFiltersWrapper = styled.div `
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: ${({ columns }) => columns || 'repeat(auto-fit, min(200px, 1fr))'};
  column-gap: ${({ theme }) => theme.spacing(2)};

  width: 100%;

  ${({ theme }) => theme.breakpoints.down('laptop')} {
    display: none;
  }
`;
export const SubmitButtonWrapper = styled.div `
  white-space: nowrap;

  ${({ theme }) => theme.breakpoints.down('laptop')} {
    display: none;
  }
`;
export const QuickFiltersWrapper = styled.div `
  display: flex;

  width: 100%;

  ${({ theme }) => theme.breakpoints.down('sm')} {
    display: none;
  }
`;
