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

export const tooltipWrapper = (palette: Colors) => {
	return css`
		position: absolute;
		background-color: ${palette.color10};
		width: 500px;
		min-height: 60px;
		-webkit-box-shadow: 0px 0px 24px -1px rgba(0, 0, 0, 0.31);
		-moz-box-shadow: 0px 0px 24px -1px rgba(0, 0, 0, 0.31);
		box-shadow: 0px 0px 24px -1px rgba(0, 0, 0, 0.31);
		z-index: 999;
		color: ${palette.color6};
		line-height: 22px;
		bottom: 30px;
		left: -200%;
		font-size: 16px;
		border-radius: 4px;
		${mediaQueries.large(css`
			position: absolute;
		`)};
		${mediaQueries.small(css`
			position: static;
			width: 100%;
			margin: 10px 0;
		`)};
	`;
};

export const iconStyles = () => {
	return css`
		position: relative;
		a {
			cursor: pointer;
		}
	`;
};