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

export const textBoxOneStyle = (palette: Colors, customStyle: any) => {
	let style = css`
		background: ${palette.color2};
		width: 100%;
		padding: 24px;
		padding-left: 47px;
		padding-bottom: 39px;
		box-sizing: border-box;
		border-radius: 5px;
		color: ${palette.color10};
		font-size: 16rem;
		h2 {
			font-size: 17rem;
			font-weight: normal;
		}
		p {
			font-size: 16rem;
		}
		a {
			text-decoration: none;
			cursor: pointer;
			font-weight: 700;
			color: ${palette.color3};
			&:hover,
			&:focus {
				color: ${darken(0.2, palette.color3)};
				outline: none;
			}
		}
		position: relative;
		${mediaQueries.small(css`
			padding-left: 8px;
			padding-left: 8px;
		`)};
	`;

	if (customStyle) {
		style = css`
			${style};
			${customStyle};
		`;
	}

	return style;
};

export const legendStyle = (palette: Colors) => {
	return css`
		font-size: 22.4rem;
		font-weight: normal;
		color: ${palette.color10};
		${mediaQueries.small(css`
			display: inline-block;
		`)};
	`;
};