import { css } from 'emotion';
import { Colors } from '../../../../models/colors';

export const radioButtonStyle = (palette: Colors) => {
	let radioButtonStyle = css`
		display: inline-block;
		input {
			opacity: 0;
			position: absolute;
			z-index: -1;
			&:checked + label {
				background: ${palette.color3};
				color: ${palette.color6};
			}
		}
		label {
			cursor: pointer;
			border-radius: 3px;
			padding: 14px;
			font-weight: normal;
			margin: 7px 7px 7px 7px;
			background: ${palette.color6};
			background: ${palette.color17};
			color: ${palette.color6};
			font-size: 16px;
		}
	`;

	return radioButtonStyle;
};