import { css } from 'emotion';

export const colorSampleStyle = (color: string) => {
	return css`
		width: 20px;
		height: 20px;
		background-color: ${color};
		font-size: 20rem;
		position: absolute;
		right: 5px;
		top: 21px;
		cursor: pointer;
	`;
};

export const inputStyle = css`
	font-size: 20rem;
	width: 100%;
	box-sizing: border-box;
`;

export const colorWrapperStyle = css`
	position: relative;
	width: 250px;
	display: inline-block;
	margin: 15px;
`;

export const colorNameStyle = css`
	font-size: 15rem;
`;

export const outerDivStyle = css`
	position: fixed;
	z-index: 9999;
`;

export const buttonStyle = css`
	font-size: 15rem;
	display: block;
	svg:first-child {
		margin-right: 10px;
	}
`;

export let blockStyle = (addStyle: boolean = false) => {
	let style = css`
		overflow: ${!addStyle ? 'visible' : 'hidden'};
		max-height: 500px;
		transition-property: all;
		transition-duration: 0.5s;
		transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
		background-color: whitesmoke;
	`;

	if (addStyle) {
		style = css`
			${style};
			max-height: 0;
		`;
	}

	return style;
};

export const pickerStyle = css`
	position: absolute;
	z-index: 2;
	top: 17px;
	left: 0;
`;