import { ValidationState } from '../../../models/Validation';
import { css } from 'emotion';
import { darken } from 'polished';
import { Colors } from '../../../models/colors';

export const inputStyle = (palette: Colors, valid?: ValidationState) => {
	let inputStyle = css`
		font-size: 15rem;
		width: 100px;
		height: 40px;
		background: transparent;
		text-align: center;
		border: 1px solid ${darken(0.41, palette.color17)};
		color: ${palette.color3};
		&:focus {
			outline: none;
		}
	`;

	if (valid === ValidationState.Invalid) {
		inputStyle = css`
			${inputStyle}
			border-color: ${palette.color8};
			&:focus {
				border-color: ${palette.color8};
			}
		`;
	}

	return inputStyle;
};