import { lighten } from 'polished';
import { css } from 'emotion';

export const containerStyle = () => {
	return css`
		margin: 0;
	`;
};

export const modalWrapperStyle = (palette: any) => {
	return css`
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: ${lighten(0.07, palette.color5)};
		font-size: 16rem;
		border-radius: 3px;
		z-index: 1000000;
		width: 770px;
	`;
};

export const closeWrapperStyle = (palette: any) => {
	return css`
		background-color: ${palette.color3};
		height: 38px;
		width: 38px;
		position: relative;
		border-radius: 50%;
		cursor: pointer;
	`;
};

export const closeStyle = (palette: any) => {
	return css`
		color: ${palette.color1};
		font-size: 15rem;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	`;
};

export const overlayStyle = () => {
	return css`
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background: url('../images/overlay.png') 50% 50% repeat;
		z-index: 10000;
		opacity: 0.5;
	`;
};

export const titleStyle = (palette: any) => {
	return css`
		font-size: 22.4rem;
		color: ${palette.color1};
	`;
};

export const headerStyle = () => {
	return css`
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 14px;
		padding: 35px 35px 0;
	`;
};

export const sectionStyle = () => {
	return css`
		footer {
			margin-top: 35px;
			display: flex;
			justify-content: space-evenly;
			padding: 0 35px 35px;
			button {
				min-width: 200px;
			}
		}
	`;
};