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

export const addressItemStyle = (palette: Colors, selected: boolean) => {
	let style = css`
		cursor: pointer;
		color: ${palette.color1};
		padding: 10px 35px;
		vertical-align: middle;
		font-size: 18rem;
		&:nth-child(2n) {
			background-color: ${palette.color10};
		}
	`;

	if (selected) {
		style = css`
			${style};
			background-color: ${palette.color3};
		`;
	}

	return style;
};

export const addressListStyle = () => {
	let style = css`
		padding: 0;
		margin: 0;
		list-style: none;
		overflow: auto;
		max-height: 40vh;
	`;

	return style;
};

export const homeIconStyle = (palette: Colors) => {
	let style = css`
		color: ${palette.color1};
		font-size: 18rem;
		padding-right: 30px;
	`;
	return style;
};