import Select from '@mui/material/Select';
import { loaderClassnames } from '../Loader';
import { MenuItem } from '../MenuItem';
import { styled } from '../styled';
import { tagClassnames } from '../Tag';
export const StateWrapper = styled.div `
  display: flex;
  align-items: center;
  justify-content: center;

  height: 56px;
`;
export const EndAdornmentWrapper = styled.div `
  display: flex;
  align-items: center;

  margin-left: auto;
  
  .${loaderClassnames.root} {
    margin-right: ${({ theme }) => theme.microSpacing(3)};
  }
`;
export const Placeholder = styled(MenuItem) `
  display: none;
`;
export const StyledSelect = styled(Select, {
    shouldForwardProp: (prop) => !['$isShowingPlaceholder'].includes(prop),
}) `
  padding-right: ${({ theme }) => theme.spacing(2)};

  color: ${({ $isShowingPlaceholder, theme }) => $isShowingPlaceholder ? theme.palette.grey[500] : 'unset'};

  .MuiSelect-select.MuiSelect-outlined {
    min-height: 20px;

    line-height: 20px;
  }
  
  & :not(.${tagClassnames.root}) > .MuiButton-root {
    width: 20px;
    height: 20px;
    margin-right: ${({ theme }) => theme.spacing(1)};

    border-radius: ${({ theme }) => theme.shape.small};

    ${({ theme }) => theme.breakpoints.down('sm')} {
      width: 24px;
      height: 24px;
    }
  }
`;
