import styled from 'styled-components';

const InputFieldWrapper = styled.div`
	display: flex;
	flex-direction: column;
	margin: 10px 0;
	align-self: flex-start;
	width:100%;
	.count {
		font-size: 12px;
		color: rgba(0,0,0,0.7);
	}
	.info {
		margin-left: 5px;
		margin-top: 6px;
		font-size: 18px;
		color: rgba(0,0,0,0.4);
	}
	.input {
		padding: 10px 20px;
		border: 1px solid #e0e0e0;
		border-radius: 4px;
		font-size: 14px;
		color: rgba(0,0,0,0.7);
	    width: 100%;
	    box-sizing: border-box;
		&:focus {
			border-color: #66afe9;
		    outline: 0;
		    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
		}
		&.error {
			border-color: #e22727;
			&:focus {
				box-shadow: none;
			}
		}
	}
	.input-field {
		position: relative;
	}
	input[disabed] {
	    background: #f2f3f3;
	}
	.icon {
	    position: absolute !important;
	    top: 10px;
	    right: 10px;
	    font-size: 18px;
	    cursor: pointer;
	    color: rgba(0,0,0,0.7);
	}
	`;

export { InputFieldWrapper };
