@import '../Style/_variables.scss';

.lm-ui-input-wrap {
	
	flex: 1;
	height: 100%;
	display: flex; 

	.lm-ui-input-core {

		flex: 1;
		position: relative;

	}
	
	.lm-ui-input {

		position: relative;
		flex: 1;
		height: 100%;

	}

	.lm-ui-input {

		padding: 13px 0;
		width: 100%;
    	height: 100%;
    	font-size: 1em;

	}

	.lm-ui-input-close {

		position: absolute;
		width: 14px;
		height: 14px;
		padding: 3px 0;
		border-radius: 50%;
		background: #bdbdbd;
		text-align: center;
		top: 50%;
		margin-top: -7px;
		right: 14px;
		
		&::before, &::after {
			
			content: '';
			position: absolute;
			width: 1px;
			height: 10px;
			top: 2px;
			left: 7px;
			background-color: #fff;

		}

		&::before {

			transform: rotate(45deg);

		}

		&::after {

			transform: rotate(-45deg);

		}

	}

	.lm-ui-close-error {

		background-color: $error-color;

	}

	.error { color: $error-color }

}

.lm-ui-textarea-wrap {
	
	.lm-ui-textarea {

		display: block;
   		width: 100%;
    	resize: none;
    	font-size: 1em;

	}

	.lm-ui-textarea-counter {

		.beyond {

			color: $error-color;

		}

		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		text-align: right;
    	padding: 5px 0 10px;
    	color: #bdbdbd;

	}

}