import { fade } from "@material-ui/core/styles" ; import { makeStyles } from "../theme" ; const useStyles = makeStyles ( ( theme ) => ( { root : { "&:hover, &:focus-visible, &$hover" : { background : theme . palette . background . paper , color : theme . palette . primary . main } , "&:active, &$active" : { background : theme . palette . saleor . active [ 4 ] , color : theme . palette . primary . main } , ... theme . typography . body1 , background : fade ( theme . palette . background . paper , 0.4 ) , borderRadius : 4 , color : theme . palette . text . secondary , fontSize : theme . typography . body1 . fontSize , fontWeight : 500 , height : 40 , padding : theme . spacing ( 0.5 , 2 ) , textAlign : "center" , transition : theme . transitions . duration . shorter + "ms" } , hover : { } , active : { } } ) , { name : "LayoutButton" } ) ; export default useStyles ;