@import "../variables";

textarea {
	width: 100%;
}

.input-container {
	font-size: $input-font-size;
	line-height: $input-line-height;
	display: inline-block;
	position: relative;
	transition: height 200ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
	background-color: transparent;

	&.form-control {
		&.invalid {
			border-color: $alert-danger-border;
		}
	}

	label {
		position: absolute;
		line-height: 22px;
		top: 38px;
		transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
		z-index: 1;
		cursor: text;
		transform: perspective(1px) scale(0.75) translate3d(0px, -28px, 0px);
		transform-origin: left top 0px;
		pointer-events: none;
		color: rgba(0, 0, 0, 0.298039);
		-webkit-user-select: none;
		display: block;
	}

	input.input {
		border: none ;
		border-width: 0;
		outline: none ;
		box-shadow: none ;
		background-image: none ;
		-webkit-appearance: none ;
		background-image: none;

		&:read-only {
			color: #777;
		}
	}

	input, input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
		font-weight: $input-font-weight;
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
		padding: 0px;
		padding-left: 10px;
		position: relative;
		width: 100%;
		border: none ;
		border-width: 0;
		outline: none ;
		box-shadow: none ;
		background-image: none ;
		-webkit-appearance: none ;
		background-image: none;
		color: rgba(0, 0, 0, 0.870588);
		height: 100%;
		&::-webkit-input-placeholder {
			font-weight: 100;
		}
	}

	hr {
		border-bottom-width: 1px;
		border-style: none none solid;
		border-color: $input-border-color;
		bottom: 8px;
		box-sizing: content-box;
		margin: 0px;
		position: absolute;
		width: 100%;
		&.highlight {
			border-bottom-width: 2px;
			border-color: $input-border-highlight-color;
			transform: scaleX(0);
			transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
		}
	}

	&.error {
		input{
			background-color: $alert-danger-border;
		}
	}

	&.focused {
		input{
			//background-color:darken(#fff,5);
		}
	}
}

