import { styled, css } from '@mui/material';
import Autocomplete from '@mui/material/Autocomplete';

export const StyledAutocomplete = styled(Autocomplete)`
  ${({ theme: { spacing, palette, typography } }) => css`
    .MuiAutocomplete-inputRoot {
      padding-left: ${spacing(2)} !important;
    }
    .MuiAutocomplete-input {
      padding: ${spacing(1.375, 0, 1.5, 0)} !important;
      font-size: ${typography['subtitle1'].fontSize};
      font-weight: ${typography['subtitle1'].fontWeight};
      line-height: ${typography['subtitle1'].lineHeight};
      color: ${palette.primary[400]};
    }

    .MuiAutocomplete-tag {
      margin-bottom: 0;
    }
  `}
` as typeof Autocomplete;