import { css } from 'emotion';
import { darken } from 'polished';

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

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

		&:disabled {
			background-color: ${palette.mainColor};
			color: ${palette.main10Color};
		}
	`;

	if (withInput) {
		buttonStyle = css`
			${buttonStyle};
			height: 45px;
			line-height: 45px;
			font-size: 16rem;
		`;
	}

	return buttonStyle;
};