const styled = require('styled-components').default;
const Color = require('color');

interface StyleProps {
	theme: {
		color: string;
		color4: string;
		colorFaded: string;
		fontSize: number;
		backgroundColor: string;
		dividerColor: string;
	};
}

const StyledInput = styled.input`
	border: 1px solid ${(props: StyleProps) => props.theme.dividerColor};
	border-radius: 6px;
	font-size: ${(props: StyleProps) => props.theme.fontSize}px;
	color: ${(props: StyleProps) => props.theme.color};
	padding: 0 10px;
	height: 30px;
	max-height: 30px;
	box-sizing: border-box;
	background-color: ${(props: StyleProps) => props.theme.backgroundColor};
	outline: none;

	&::placeholder {
		color: ${(props: StyleProps) => props.theme.colorFaded};
	}

	&:focus {
		border-color: ${(props: StyleProps) => props.theme.color4};
		box-shadow: 0 0 0 3px ${(props: StyleProps) => Color(props.theme.color4).alpha(0.15)};
	}
`;

export default StyledInput;