import { fade } from "@material-ui/core/styles/colorManipulator" ; import { makeStyles } from "../theme" ; const useStyles = makeStyles ( ( theme ) => ( { actions : { } , actionsButton : { "&:hover" : { color : theme . palette . primary . main } , "&:last-child" : { marginLeft : theme . spacing ( 1.5 ) } , "& svg" : { color : "currentColor" , width : 16 } , border : "2px solid currentColor" , borderRadius : 2 , boxSizing : "border-box" , color : theme . palette . text . primary , height : 36 , width : 36 , transition : theme . transitions . create ( "color" , { duration : theme . transitions . duration . shorter } ) } , actionsButtonDisabled : { border : `2px solid ${ theme . palette . text . disabled }` , color : theme . palette . text . disabled } , dark : { "&:focus, &:hover" : { "& > span:first-of-type" : { backgroundColor : fade ( theme . palette . primary . main , 0.2 ) } } , "&:not($actionsButtonDisabled)" : { color : theme . palette . primary . main } } , root : { } , toolbar : { justifyContent : "space-between" } , spacer : { } , rowNumber : { fontSize : theme . typography . body2 . fontSize } , rowNumberLabel : { } , rowNumberSelect : { "&&:before, &&:after" : { content : "none" } , marginLeft : theme . spacing ( 1 ) } , rowNumberSelectLabel : { "&&" : { color : theme . palette . primary . main } } } ) , { name : "Pagination" } ) ; export default useStyles ;