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

export const legendStyle = (palette: Colors) => {
	return css`
		font-size: 22.4rem;
		font-weight: normal;
		color: ${palette.color15};
	`;
};

export const legendTooltip = css`
	justify-content: space-between;
	align-items: center;
	${mediaQueries.large(css`
		display: flex;
	`)};
	${mediaQueries.small(css`
		display: block;
		span {
			a {
				svg {
					margin-top: -22px;
				}
			}
		}
	`)};
`;

export const legendWrapperStyle = css`
	align-items: center;
	margin-bottom: 20px;
	${mediaQueries.large(css`
		display: flex;
		font-size: 15rem;
	`)};
	${mediaQueries.small(css`
		display: block;
		font-size: 12.6rem;
	`)};
`;