import { makeStyles } from ".." ; import { BaseListItemCellClassKey , BaseListItemClassKey } from "../BaseList" ; export const useStyles = makeStyles < { } , BaseListItemCellClassKey | BaseListItemClassKey | "body" > ( ( theme ) => { const outerPadding = { "&:first-child" : { paddingLeft : theme . spacing ( 4 ) } , "&:last-child" : { paddingRight : theme . spacing ( 4 ) } } ; return { row : { alignItems : "center" , display : "grid" , minHeight : 48 , gap : theme . spacing ( 4 ) } , rowBody : { "&:first-child" : { marginTop : theme . spacing ( 1 ) } , background : theme . palette . background . paper , borderRadius : 6 , boxShadow : theme . shadows [ 0 ] , height : 90 , margin : theme . spacing ( 1.5 , 0 ) , transition : `${ theme . transitions . create ( "box-shadow" ) },${ theme . transitions . create ( "background" , { delay : 0 , duration : theme . transitions . duration . shortest } ) }` , ... theme . typography . body1 } , rowFoot : { "& $cell" : outerPadding } , rowHead : { "& $cell" : outerPadding } , rowHover : { "&$rowBody:hover" : { "& $cell:first-child" : { color : theme . palette . primary . main } , boxShadow : theme . shadows [ 16 ] } } , rowBodySelected : { } , cell : { boxSizing : "content-box" , flex : 1 , transition : theme . transitions . create ( "color" , { duration : theme . transitions . duration . shorter } ) } , cellAction : { "&$cell:last-child" : { paddingRight : theme . spacing ( 2.5 ) } , display : "flex" , gap : theme . spacing ( 1 ) , justifyContent : "flex-end" } , cellCheckbox : { "&$cell:first-child" : { paddingLeft : theme . spacing ( 2 ) } } , cellBody : { ... outerPadding , padding : theme . spacing ( 1 , 0 ) } , cellHeader : { ... theme . typography . body2 , color : theme . palette . text . secondary } , body : { margin : 0 , padding : 0 } } ; } , { name : "OffsettedList" } ) ;