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

export const header = (palette: Colors) => {
	return css`
		background-color: ${palette.color6};
	`;
};

export const headerInnerWrapper = () => {
	return css`
		max-width: 1200px;
		margin: 0 auto;
		padding-left: 30px;
		padding-right: 30px;
		font-size: 30rem;
		display: flex;
		height: 65px;
		align-items: center;
	`;
};

export const logo = () => {
	return css`
		cursor: pointer;
		width: 80px;
		padding-left: 20px;
	`;
};

export const phone = (palette: Colors) => {
	return css`
		margin-left: auto;
		font-size: 14rem;
		color: ${palette.color10};
		text-decoration: none;
		&:hover {
			text-decoration: underline;
		}
	`;
};
export const loginButton = (palette: Colors) => {
	return css`
		background-color: ${palette.color3};
		color: ${palette.color6};
		font-size: 12rem;
		border-radius: 27px;
		border: none;
		padding-left: 15px;
		padding-right: 15px;
		min-width: 81px;
		height: 27px;
		outline: none;
		cursor: pointer;
		&:hover {
			background-color: ${palette.color4};
		}
		${mediaQueries.large(css`
			margin-left: 0;
			margin-left: 20px;
		`)};
		${mediaQueries.small(css`
			margin-left: auto;
		`)};
	`;
};