import { menuItemClasses } from '@mui/material/MenuItem';
import { Grid } from '../../Grid';
import { MenuItem } from '../../MenuItem';
import { styled } from '../../styled';
import { Typography } from '../../Typography';
// as typeof MenuItem необходим для возможности прокинуть component
// https://github.com/mui/material-ui/issues/15695
export const ProductItem = styled(MenuItem) `
  &.${menuItemClasses.gutters} {
    min-height: 56px;
    padding: ${({ theme }) => theme.spacing(2, 3)};
  }
`;
export const Logo = styled('img', {
    shouldForwardProp: (prop) => prop !== 'color',
}) `
  flex-shrink: 0;

  width: 32px;
  height: 32px;
  margin-right: ${({ theme }) => theme.spacing(2)};

  background-color: ${({ color }) => color};
  border-radius: ${({ theme }) => theme.shape.small};
`;
export const TitleErrorContainer = styled(Grid) `
  grid-auto-flow: column;
  column-gap: ${({ theme }) => theme.spacing(2)};
  align-items: center;
  justify-content: center;

  color: ${({ theme }) => theme.palette.error.dark};
`;
export const ProductName = styled(Typography) `
  overflow: hidden;

  text-overflow: ellipsis;
`;
