import { makeStyles } from "../theme" ; const useStyles = makeStyles ( ( theme ) => ( { root : { "&:hover, &:focus-visible, &$hover" : { borderColor : theme . palette . saleor . active [ 3 ] , color : theme . palette . primary . main } , "&:active, &$active" : { backgroundColor : theme . palette . saleor . active [ 5 ] , borderColor : theme . palette . saleor . active [ 3 ] , color : theme . palette . primary . main } , backgroundColor : "transparent" , border : `1px dashed ${ theme . palette . saleor . main [ 3 ] }` , borderRadius : 20 , cursor : "pointer" , color : theme . palette . text . primary , outline : 0 , userSelect : "none" , padding : "5px 8px" , transition : theme . transitions . create ( [ "border-color" , "background-color" , "color" ] , { duration : theme . transitions . duration . shorter } ) , ... theme . typography . body1 } , hover : { } , active : { } } ) , { name : "PillLink" } ) ; export default useStyles ;