import { makeStyles } from "../theme" ; const avatarSize = 32 ; const useStyles = makeStyles ( ( theme ) => ( { avatar : { "&&" : { height : avatarSize , width : avatarSize } , backgroundColor : theme . palette . background . paper } , avatarInitials : { height : avatarSize , lineHeight : avatarSize + "px" , width : avatarSize , color : theme . palette . primary . contrastText , textAlign : "center" } , avatarPlaceholder : { alignItems : "center" , background : theme . palette . primary . main , borderRadius : "100%" , display : "flex" , justifyContent : "center" } , label : { lineHeight : 1.2 , textAlign : "left" } , labelContainer : { [ theme . breakpoints . down ( "sm" ) ] : { marginLeft : 0 } , display : "inline-flex" , alignItems : "center" , marginLeft : theme . spacing ( 1 ) } , popover : { marginTop : theme . spacing ( 0.5 ) , zIndex : 10 } , userChip : { "&&" : { [ theme . breakpoints . down ( "sm" ) ] : { padding : theme . spacing ( 0.5 ) } , padding : theme . spacing ( 0.5 , 3 , 0.5 , 1 ) } , ... theme . typography . body1 , display : "flex" , textTransform : "unset" } , userMenuContainer : { cursor : "pointer" , display : "inline-block" , position : "relative" } } ) , { name : "UserChipMenu" } ) ; export default useStyles ;