import { makeStyles } from '@mui/styles';
export var useStyles = makeStyles(function (theme) { return ({
    control: {
        display: 'flex',
        '&&': {
            padding: 0
        },
        height: 'auto'
    },
    valueContainer: {
        display: 'flex',
        flexWrap: 'nowrap',
        flex: 1,
        alignItems: 'center',
        overflow: 'hidden',
        marginLeft: theme.spacing(1)
    },
    'valueContainer--multi': {
        flexWrap: 'wrap'
    },
    multiValue: {
        margin: theme.spacing(0.5, 0.5),
        maxWidth: 'calc(100% - 8px)'
    },
    multiValue__label: {
        paddingRight: 0,
        marginRight: 12,
        maxWidth: '100%',
        overflow: 'hidden'
    },
    noOptionsMessage: {
        padding: theme.spacing(1, 2)
    },
    singleValue: {
        fontSize: 16,
        whiteSpace: 'nowrap',
        textOverflow: 'ellipsis',
        overflow: 'hidden'
    },
    placeholder: {
        position: 'absolute',
        left: 6,
        bottom: 10,
        fontSize: 16
    },
    menu: {
        zIndex: 40,
        marginTop: theme.spacing(1)
    },
    clearIndicator: {},
    dropdownIndicator: {},
    groupHeading: {
        paddingLeft: '28px'
    },
    option: {
        fontWeight: 400
    },
    'option--selected': {
        fontWeight: 400
    },
    // Always defined so the dynamic class key is never `undefined`. Consumers supply the actual
    // disabled-option styling per-instance via the `classes` prop (merged on top of this).
    'option--disabled': {},
    'option--item': {
        display: 'block',
        width: '100%',
        textOverflow: 'ellipsis',
        overflow: 'hidden',
        whiteSpace: 'pre'
    }
}); });
