import { css } from 'emotion';
import { darken } from 'polished';
import { mediaQueries } from '../../../utils/styles';

export const buttonStyle = (palette: any) => {
	let buttonStyle = css`
		height: 54px;
		display: inline-block;
		line-height: 54px;
		text-align: center;
		border: 0;
		border-radius: 27px;
		background-color: ${palette.color3};
		font-weight: 500;
		font-size: 18rem;
		color: ${palette.color15};
		width: 200px;

		&:hover,
		&:focus {
			background-color: ${darken(0.1, palette.color3)};
			color: ${palette.color1};
			border: 0;
			outline: 0;
			text-decoration: none;
			cursor: pointer;
		}

		&:disabled {
			background-color: ${palette.mainColor};
			color: ${palette.main10Color};
		}
		${mediaQueries.small(css`
			margin-top: 15px;
			width: 100%;
		`)};
	`;

	return buttonStyle;
};