text: import {
  	hexToRGBAlpha,
  	grayColor,
  	roseColor,
  	primaryColor,
  	infoColor,
  	successColor,
  	warningColor,
  	dangerColor,
  } from 'assets/jss/nextjs-material-kit.js';
  
  const buttonStyle = {
  	button: {
  		minHeight: 'auto',
  		minWidth: 'auto',
  		backgroundColor: grayColor,
  		color: '#FFFFFF',
  		boxShadow: '0 2px 2px 0 rgba(153, 153, 153, 0.14), 0 3px 1px -2px rgba(153, 153, 153, 0.2), 0 1px 5px 0 rgba(153, 153, 153, 0.12)',
  		border: 'none',
  		borderRadius: '3px',
  		position: 'relative',
  		padding: '12px 30px',
  		margin: '.3125rem 1px',
  		fontSize: '12px',
  		fontWeight: '400',
  		textTransform: 'uppercase',
  		letterSpacing: '0',
  		willChange: 'box-shadow, transform',
  		transition: 'box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
  		lineHeight: '1.42857143',
  		textAlign: 'center',
  		whiteSpace: 'nowrap',
  		verticalAlign: 'middle',
  		touchAction: 'manipulation',
  		cursor: 'pointer',
  		'&:hover,&:focus': {
  			color: '#FFFFFF',
  			backgroundColor: grayColor,
  			boxShadow:
  				'0 14px 26px -12px rgba(153, 153, 153, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(153, 153, 153, 0.2)',
  		},
  		'& .fab,& .fas,& .far,& .fal,& .material-icons': {
  			position: 'relative',
  			display: 'inline-block',
  			top: '0',
  			fontSize: '1.1rem',
  			marginRight: '4px',
  			verticalAlign: 'middle',
  		},
  		'& svg': {
  			position: 'relative',
  			display: 'inline-block',
  			top: '0',
  			width: '18px',
  			height: '18px',
  			marginRight: '4px',
  			verticalAlign: 'middle',
  		},
  		'&$justIcon': {
  			'& .fab,& .fas,& .far,& .fal,& .material-icons': {
  				marginRight: '0px',
  				position: 'absolute',
  				width: '100%',
  				transform: 'none',
  				left: '0px',
  				top: '0px',
  				height: '100%',
  				lineHeight: '41px',
  				fontSize: '20px',
  			},
  		},
  	},
  	fullWidth: {
  		width: '100%',
  	},
  	primary: {
  		backgroundColor: primaryColor,
  		boxShadow: `0 2px 2px 0 ${hexToRGBAlpha(primaryColor, 0.14)}, 0 3px 1px -2px ${hexToRGBAlpha(
  			primaryColor,
  			0.2
  		)}, 0 1px 5px 0 ${hexToRGBAlpha(primaryColor, 0.12)}`,
  		'&:hover,&:focus': {
  			backgroundColor: primaryColor,
  			boxShadow: `0 14px 26px -12px ${hexToRGBAlpha(
  				primaryColor,
  				0.42
  			)}, 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px ${hexToRGBAlpha(primaryColor, 0.2)}`,
  		},
  	},
  	info: {
  		backgroundColor: infoColor,
  		boxShadow: `0 2px 2px 0 ${hexToRGBAlpha(infoColor, 0.14)}, 0 3px 1px -2px ${hexToRGBAlpha(infoColor, 0.2)}, 0 1px 5px 0 ${hexToRGBAlpha(
  			infoColor,
  			0.12
  		)}`,
  		'&:hover,&:focus': {
  			backgroundColor: infoColor,
  			boxShadow: `0 14px 26px -12px ${hexToRGBAlpha(infoColor, 0.42)}, 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px ${hexToRGBAlpha(
  				infoColor,
  				0.2
  			)}`,
  		},
  	},
  	success: {
  		backgroundColor: successColor,
  		boxShadow: `0 2px 2px 0 ${hexToRGBAlpha(successColor, 0.14)}, 0 3px 1px -2px ${hexToRGBAlpha(
  			successColor,
  			0.2
  		)}, 0 1px 5px 0 ${hexToRGBAlpha(successColor, 0.12)}`,
  		'&:hover,&:focus': {
  			backgroundColor: successColor,
  			boxShadow: `0 14px 26px -12px ${hexToRGBAlpha(
  				successColor,
  				0.42
  			)}, 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px ${hexToRGBAlpha(successColor, 0.2)}`,
  		},
  	},
  	warning: {
  		backgroundColor: warningColor,
  		boxShadow: `0 2px 2px 0 ${hexToRGBAlpha(warningColor, 0.14)}, 0 3px 1px -2px ${hexToRGBAlpha(
  			warningColor,
  			0.2
  		)}, 0 1px 5px 0 ${hexToRGBAlpha(warningColor, 0.12)}`,
  		'&:hover,&:focus': {
  			backgroundColor: warningColor,
  			boxShadow: `0 14px 26px -12px ${hexToRGBAlpha(
  				warningColor,
  				0.42
  			)}, 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px ${hexToRGBAlpha(warningColor, 0.2)}`,
  		},
  	},
  	danger: {
  		backgroundColor: dangerColor,
  		boxShadow: `0 2px 2px 0 ${hexToRGBAlpha(dangerColor, 0.14)}, 0 3px 1px -2px ${hexToRGBAlpha(
  			dangerColor,
  			0.2
  		)}, 0 1px 5px 0 ${hexToRGBAlpha(dangerColor, 0.12)}`,
  		'&:hover,&:focus': {
  			backgroundColor: dangerColor,
  			boxShadow: `0 14px 26px -12px ${hexToRGBAlpha(
  				dangerColor,
  				0.42
  			)}, 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px ${hexToRGBAlpha(dangerColor, 0.2)}`,
  		},
  	},
  	rose: {
  		backgroundColor: roseColor,
  		boxShadow: `0 2px 2px 0 ${hexToRGBAlpha(primaryColor, 0.14)}, 0 3px 1px -2px ${hexToRGBAlpha(
  			primaryColor,
  			0.2
  		)}, 0 1px 5px 0 ${hexToRGBAlpha(primaryColor, 0.12)}`,
  		'&:hover,&:focus': {
  			backgroundColor: roseColor,
  			boxShadow: `0 14px 26px -12px ${hexToRGBAlpha(
  				primaryColor,
  				0.42
  			)}, 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px ${hexToRGBAlpha(primaryColor, 0.2)}`,
  		},
  	},
  	white: {
  		'&,&:focus,&:hover,&:visited': {
  			backgroundColor: '#FFFFFF',
  			color: grayColor,
  		},
  	},
  	twitter: {
  		backgroundColor: '#55acee',
  		color: '#fff',
  		boxShadow: '0 2px 2px 0 rgba(85, 172, 238, 0.14), 0 3px 1px -2px rgba(85, 172, 238, 0.2), 0 1px 5px 0 rgba(85, 172, 238, 0.12)',
  		'&:hover,&:focus,&:visited': {
  			backgroundColor: '#55acee',
  			color: '#fff',
  			boxShadow: '0 14px 26px -12px rgba(85, 172, 238, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(85, 172, 238, 0.2)',
  		},
  	},
  	facebook: {
  		backgroundColor: '#3b5998',
  		color: '#fff',
  		boxShadow: '0 2px 2px 0 rgba(59, 89, 152, 0.14), 0 3px 1px -2px rgba(59, 89, 152, 0.2), 0 1px 5px 0 rgba(59, 89, 152, 0.12)',
  		'&:hover,&:focus': {
  			backgroundColor: '#3b5998',
  			color: '#fff',
  			boxShadow: '0 14px 26px -12px rgba(59, 89, 152, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(59, 89, 152, 0.2)',
  		},
  	},
  	google: {
  		backgroundColor: '#dd4b39',
  		color: '#fff',
  		boxShadow: '0 2px 2px 0 rgba(221, 75, 57, 0.14), 0 3px 1px -2px rgba(221, 75, 57, 0.2), 0 1px 5px 0 rgba(221, 75, 57, 0.12)',
  		'&:hover,&:focus': {
  			backgroundColor: '#dd4b39',
  			color: '#fff',
  			boxShadow: '0 14px 26px -12px rgba(221, 75, 57, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(221, 75, 57, 0.2)',
  		},
  	},
  	github: {
  		backgroundColor: '#333333',
  		color: '#fff',
  		boxShadow: '0 2px 2px 0 rgba(51, 51, 51, 0.14), 0 3px 1px -2px rgba(51, 51, 51, 0.2), 0 1px 5px 0 rgba(51, 51, 51, 0.12)',
  		'&:hover,&:focus': {
  			backgroundColor: '#333333',
  			color: '#fff',
  			boxShadow: '0 14px 26px -12px rgba(51, 51, 51, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(51, 51, 51, 0.2)',
  		},
  	},
  	simple: {
  		'&,&:focus,&:hover,&:visited': {
  			color: '#FFFFFF',
  			background: 'transparent',
  			boxShadow: 'none',
  		},
  		'&$primary': {
  			'&,&:focus,&:hover,&:visited': {
  				color: primaryColor,
  			},
  		},
  		'&$info': {
  			'&,&:focus,&:hover,&:visited': {
  				color: infoColor,
  			},
  		},
  		'&$success': {
  			'&,&:focus,&:hover,&:visited': {
  				color: successColor,
  			},
  		},
  		'&$warning': {
  			'&,&:focus,&:hover,&:visited': {
  				color: warningColor,
  			},
  		},
  		'&$rose': {
  			'&,&:focus,&:hover,&:visited': {
  				color: roseColor,
  			},
  		},
  		'&$danger': {
  			'&,&:focus,&:hover,&:visited': {
  				color: dangerColor,
  			},
  		},
  		'&$twitter': {
  			'&,&:focus,&:hover,&:visited': {
  				color: '#55acee',
  			},
  		},
  		'&$facebook': {
  			'&,&:focus,&:hover,&:visited': {
  				color: '#3b5998',
  			},
  		},
  		'&$google': {
  			'&,&:focus,&:hover,&:visited': {
  				color: '#dd4b39',
  			},
  		},
  		'&$github': {
  			'&,&:focus,&:hover,&:visited': {
  				color: '#333333',
  			},
  		},
  	},
  	transparent: {
  		'&,&:focus,&:hover,&:visited': {
  			color: 'inherit',
  			background: 'transparent',
  			boxShadow: 'none',
  		},
  	},
  	disabled: {
  		opacity: '0.65',
  		pointerEvents: 'none',
  	},
  	lg: {
  		padding: '1.125rem 2.25rem',
  		fontSize: '0.875rem',
  		lineHeight: '1.333333',
  		borderRadius: '0.2rem',
  	},
  	sm: {
  		padding: '0.40625rem 1.25rem',
  		fontSize: '0.6875rem',
  		lineHeight: '1.5',
  		borderRadius: '0.2rem',
  	},
  	round: {
  		borderRadius: '30px',
  	},
  	block: {
  		width: '100% !important',
  	},
  	link: {
  		'&,&:hover,&:focus': {
  			backgroundColor: 'transparent',
  			color: '#000999',
  			boxShadow: 'none',
  		},
  	},
  	justIcon: {
  		paddingLeft: '12px',
  		paddingRight: '12px',
  		fontSize: '20px',
  		height: '41px',
  		minWidth: '41px',
  		width: '41px',
  		'& .fab,& .fas,& .far,& .fal,& svg,& .material-icons': {
  			marginRight: '0px',
  		},
  		'&$lg': {
  			height: '57px',
  			minWidth: '57px',
  			width: '57px',
  			lineHeight: '56px',
  			'& .fab,& .fas,& .far,& .fal,& .material-icons': {
  				fontSize: '32px',
  				lineHeight: '56px',
  			},
  			'& svg': {
  				width: '32px',
  				height: '32px',
  			},
  		},
  		'&$sm': {
  			height: '30px',
  			minWidth: '30px',
  			width: '30px',
  			'& .fab,& .fas,& .far,& .fal,& .material-icons': {
  				fontSize: '17px',
  				lineHeight: '29px',
  			},
  			'& svg': {
  				width: '17px',
  				height: '17px',
  			},
  		},
  	},
  };
  
  export default buttonStyle;
  