import { formControlClasses } from '@mui/material/FormControl';
import { inputBaseClasses } from '@mui/material/InputBase';
import { loaderClassnames } from '../../Loader';
import { svgIconClassnames } from '../../SvgIcon';
import { styled } from '../../styled';
import { TagsList } from '../../TagsList';
import { TextField } from '../../TextField';
export const StyledTextField = styled(TextField, {
    shouldForwardProp: (prop) => !['$isHidden'].includes(prop),
}) `
  .${inputBaseClasses.input} {
    width: ${({ $isHidden }) => $isHidden && 0};
  }

  &.${formControlClasses.root} .${inputBaseClasses.adornedEnd} .${loaderClassnames.root} .${svgIconClassnames.root} {
    width: 100%;
    height: 100%;
  }
`;
export const StyledTagsList = styled(TagsList) `
  overflow: hidden;

  width: 100%;
`;
export const IconWrapper = styled.div `
  display: flex;
  gap: ${({ theme }) => theme.spacing(1)};
`;
