import { formHelperTextClasses } from '@mui/material/FormHelperText';
import { DIALOG_SIZES } from '../../Dialog';
import { DialogContent } from '../../DialogContent';
import { SearchField } from '../../SearchField';
import { styled } from '../../styled';
import { treeListClassnames } from '../../Tree';
export const StyledDialogContent = styled(DialogContent, {
    shouldForwardProp: (prop) => !['$size'].includes(prop),
}) `
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: max-content 32px 1fr;
  gap: ${({ theme }) => theme.spacing(4)};

  width: ${({ $size }) => DIALOG_SIZES[$size].minWidth};
  height: ${({ $size }) => DIALOG_SIZES[$size].minWidth};
  
  ${({ theme }) => theme.breakpoints.down('sm')} {
    width: auto;
  }
`;
export const TreeListWrapper = styled.div `
    overflow: auto;

    height: 100%;
  
  & .${treeListClassnames.list} {
    width: auto;
    min-width: max-content;
  }
`;
export const StyledSearchField = styled(SearchField) `
  & .${formHelperTextClasses.root} {
    display: flex;

    margin-top: ${({ theme }) => theme.spacing(2)};
    
    color: ${({ theme }) => theme.palette.grey[500]};
  }
`;
export const UserHintWrapper = styled.div `
  display: flex;
  align-items: center;
  justify-content: center;

  height: 36px;
`;
