import styled from 'styled-components';

const TextAreaFieldWrapper = styled.div`
	display: flex;
	flex-direction: column;
	margin: 10px 0;
	align-self: flex-start;
	.error {
		.text-input__control {
			border-color: #e22727;
		}
	}
	.count {
		font-size: 12px;
		color: rgba(0,0,0,0.7);
	}
	.info {
		margin-left: 10px;
		font-size: 18px;
		color: rgba(0,0,0,0.4);
	}
	textarea {
		padding: 10px 20px 10px 15px;
		border: 1px solid #e0e0e0;
		border-radius: 4px;
		font-size: 14px;
		color: rgba(0,0,0,0.7);
		box-sizing: border-box;
		outline: none;
		&: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;
		}
	}
	textarea[disabed] {
	    background: #f2f3f3;
	}
	.textarea-field {
		position: relative;
	}
	.clear-icon {
	    position: absolute;
	    top: 3px;
	    right: 15px;
	    font-size: 18px;
	    cursor: pointer;
	    color: rgba(0,0,0,0.7);
	}`;

export { TextAreaFieldWrapper };