"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ProductName = exports.TitleErrorContainer = exports.Logo = exports.ProductItem = void 0;
const MenuItem_1 = require("@mui/material/MenuItem");
const Grid_1 = require("../../Grid");
const MenuItem_2 = require("../../MenuItem");
const styled_1 = require("../../styled");
const Typography_1 = require("../../Typography");
// as typeof MenuItem необходим для возможности прокинуть component
// https://github.com/mui/material-ui/issues/15695
exports.ProductItem = (0, styled_1.styled)(MenuItem_2.MenuItem) `
  &.${MenuItem_1.menuItemClasses.gutters} {
    min-height: 56px;
    padding: ${({ theme }) => theme.spacing(2, 3)};
  }
`;
exports.Logo = (0, styled_1.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};
`;
exports.TitleErrorContainer = (0, styled_1.styled)(Grid_1.Grid) `
  grid-auto-flow: column;
  column-gap: ${({ theme }) => theme.spacing(2)};
  align-items: center;
  justify-content: center;

  color: ${({ theme }) => theme.palette.error.dark};
`;
exports.ProductName = (0, styled_1.styled)(Typography_1.Typography) `
  overflow: hidden;

  text-overflow: ellipsis;
`;
