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

export const labelWrapper = (palette: Colors) => {
	return css`
		display: flex;
		align-items: center;
		margin-bottom: 21px;

		.pseudo {
			margin-left: auto;
			width: 55px;
		}

		label {
			color: ${palette.color15};
			margin-right: auto;
			width: 55px;

			${mediaQueries.small(css`
				font-size: 13rem;
			`)};
			${mediaQueries.large(css`
				font-size: 15rem;
			`)};
		}
	`;
};

export const inputWrapper = css`
	display: flex;
	justify-content: space-between;
	align-items: center;

	${mediaQueries.small(css`
		width: 168px;
	`)};

	${mediaQueries.large(css`
		width: 180px;
	`)};
`;

export const stepUpDownButtons = (palette: Colors) => {
	return css`
		background: none;
		border: none;
		font-size: 14rem;
		cursor: pointer;
		svg {
			height: 15px;
			width: 15px;
		}
		rect,
		path {
			fill: ${lighten(0.5, palette.color17)};
			stroke: ${lighten(0.5, palette.color17)};
		}
		&:hover,
		&:focus {
			outline: none;
			rect,
			path {
				fill: ${palette.color17};
				stroke: ${palette.color17};
			}
		}
	`;
};

export const rangeWrapper = (palette: Colors) => {
	return css`
		position: relative;
		width: 100%;

		.rc-slider-rail {
			width: 100%;
			background-color: transparent;
			border: 2px solid ${darken(0.41, palette.color17)};
			border-radius: 4px;
			box-sizing: border-box;

			${mediaQueries.small(css`
				height: 36px;
			`)};

			${mediaQueries.large(css`
				height: 53px;
			`)};
		}

		.rc-slider-handle {
			background: ${darken(0.41, palette.color17)};
			width: 17px;
			border: 2px solid ${darken(0.41, palette.color17)};
			position: absolute;
			margin-left: -7px;
			touch-action: pan-x;
			cursor: grab;
			border-radius: 2px;

			${mediaQueries.small(css`
				height: 56px;
				top: -10px;
			`)};

			${mediaQueries.large(css`
				height: 65px;
				top: -5px;
			`)};
		}

		.rc-slider-track {
			background: ${palette.color3};
			position: absolute;
			top: 0px;
			border: 1px solid ${palette.color3};
			border-radius: 4px;

			${mediaQueries.small(css`
				height: 36px;
			`)};

			${mediaQueries.large(css`
				height: 53px;
			`)};
		}
	`;
};

export const input = (palette: Colors) => {
	return css`
		font-size: 15rem;
		width: 100px;
		height: 40px;
		background: transparent;
		text-align: center;
		border: 1px solid ${darken(0.41, palette.color17)};
		color: ${palette.color3};
	`;
};
export const mobileError = (palette: Colors) => {
	return css`
		font-size: 20rem;
		color: red;
	`;
};