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

export const tooltipArrow = (palette: Colors) => {
	return css`
		width: 16px;
		height: 10px;
		position: absolute;
		top: 100%;
		left: 92px;
		transform: translateX(-50%);
		overflow: hidden;
		&::after {
			content: '';
			position: absolute;
			width: 12px;
			height: 12px;
			background: ${palette.color10};
			transform: translateX(-50%) translateY(-50%) rotate(45deg);
			top: 0;
			left: 50%;
			-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);
		}
		${mediaQueries.large(css`
			display: block;
		`)};
		${mediaQueries.small(css`
			display: none;
		`)};
	`;
};

export const closeInput = (palette: Colors) => {
	return css`
		background: none;
		border: 0;
		margin-right: 2px;
		font-size: 12rem;
		cursor: pointer;
		color: ${palette.color13};
		&:hover,
		&:active {
			color: ${lighten(0.2, palette.color13)};
		}
	`;
};

export const closeInputHeader = (palette: Colors) => {
	return css`
		text-align: right;
		padding: 8px 0;
		line-height: 14px;
		background: ${palette.color10};
		border-top-left-radius: 4px;
		border-top-right-radius: 4px;
	`;
};

export const tooltipText = (palette: Colors) => {
	return css`
		background: ${palette.color10};
		padding: 0px 20px 20px 20px;
		color: ${palette.color13};
		p {
			margin: 0;
		}
		border-bottom-left-radius: 4px;
		border-bottom-right-radius: 4px;
	`;
};

export const tooltipStyle = (palette: Colors) => {
	return css`
		font-size: 20rem;
		color: ${palette.color4};
		margin-left: 14px;
		vertical-align: middle;
		cursor: pointer;
		&:hover,
		&:focus {
			outline: none;
			color: ${darken(0.2, palette.color4)};
		}
		div {
			max-width: 400px;
			font-size: 20rem;
		}
		${mediaQueries.small(css`
			float: right;
			margin-top: -5px;
		`)};
	`;
};