import createStyles from '@material-ui/core/styles/createStyles' ; import makeStyles from '@material-ui/core/styles/makeStyles' ; import { tokens } from '@naturacosmeticos/natds-styles' ; import { ICounterProps } from './Counter' ; import { IThemeWeb } from '../../Themes' ; const { sizes } = tokens ; export const INPUT_DIFFERENCE = 2 ; export const getButtonheight = ( { size } ) : number => ( size === 'small' ? sizes ?. semiX : sizes ?. medium ) ; export const getInputHeight = ( props ) : number => getButtonheight ( props ) - INPUT_DIFFERENCE ; const style = ( theme ) => createStyles ( { button : { minHeight : getButtonheight , '&:last-child' : { borderLeft : 0 } } , input : { textAlign : 'center' , width : `${ sizes . semiX }px !important` , '& .MuiInput-root' : { borderRadius : 0 , padding : 0 } , '& .MuiInput-input' : { minHeight : getInputHeight , padding : 0 , '&::-webkit-inner-spin-button, &::-webkit-outer-spin-button' : { WebkitAppearance : 'none' } } } , group : { display : 'flex' , alignItems : 'center' } } ) ; export const useStyles = makeStyles ( style , { name : 'NatDSCounter' } ) ; export default useStyles ;