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

export const labelStyle = (colorPalette: Colors, required?: boolean) => {
	let labelStyle = css`
		display: inline-block;
		color: ${colorPalette.color15};
	`;
	if (required) {
		labelStyle = css`
			${labelStyle};
			&:after {
				content: '*';
			}
		`;
	}
	return labelStyle;
};

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

export const labelTooltip = () => {
	return css`
		justify-content: space-between;
		align-items: baseline;
		${mediaQueries.large(css`
			display: flex;
		`)};
		${mediaQueries.small(css`
			display: block;
		`)};
	`;
};