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

export const wrapperStyle = css`
	${mediaQueries.small(css`
		width: 100%;
	`)};
	${mediaQueries.large(css`
		width: 90%;
	`)};

	> div {
		&:first-child {
			${mediaQueries.small(css`
				margin-bottom: 32px;
			`)};
			${mediaQueries.large(css`
				margin-bottom: 72px;
			`)};
		}
	}
`;

export const footerStyle = (palette: Colors) => css`
	font-size: 13rem;
	line-height: 16rem;
	width: 90%;
	margin: 0 auto;
	text-align: center;
	color: ${palette.color15};

	a {
		text-decoration: none;
		cursor: pointer;
		color: ${palette.color3};
		&:hover,
		&:focus {
			color: ${darken(0.2, palette.color3)};
			outline: none;
		}
	}

	${mediaQueries.small(css`
		padding-top: 30px;
	`)};
	${mediaQueries.large(css`
		padding-top: 51px;
	`)};
`;