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

export const oneColWithWelcomeStyle = (palette: Colors) => {
	return css`
		background-color: ${palette.color1};
		${mediaQueries.large(css`
			padding-top: 100px;
			padding-bottom: 98px;
		`)};
		${mediaQueries.small(css`
			padding-top: 98px;
			padding-bottom: 60px;
		`)};
	`;
};
export const formStyle = () => {
	return css`
		fieldset {
			border: none;
			margin: 0;
			padding: 0;
		}

		> fieldset {
			&:first-child {
				margin-bottom: 60px;
			}
			&:nth-last-child(2) {
				margin-top: 37px;
			}
			> * + * {
				margin-bottom: 22px;
			}
		}

		${mediaQueries.large(css`
			max-width: 1076px;
			margin: 0 auto;
			padding-left: 30px;
			padding-right: 30px;
		`)};
		${mediaQueries.small(css`
			padding-left: 15px;
			padding-right: 15px;
		`)};
	`;
};

export const legendStyle = (palette: Colors) => {
	return css`
		margin-bottom: 20px;
		font-size: 22.4rem;
		font-weight: normal;
		color: ${palette.color15};
	`;
};

export const submitWrapperStyle = () => {
	return css`
		margin-bottom: 0;
		margin-top: 40px;
		display: flex;
		${mediaQueries.large(css`
			justify-content: flex-end;
		`)};
		${mediaQueries.small(css``)};
	`;
};