$lui-text-field-background-color: $white;
$lui-text-field-disabled-background-color: $grey-300;
$lui-disabled-text-color: $grey-400;
$lui-text-field-color: $grey-600;
$lui-text-field-error-color: $error;
$lui-text-field-success-color: $success;
$lui-text-field-alert-color: $alert;
$lui-text-field-primary-color: $primary-1-color;
$lui-text-field-secondary-color: $primary-2-color;
$lui-text-field-primary-subtext-color: $grey-600;
$lui-text-field-secondary-subtext-color: $grey-600;

.lui-text-field-wrapper{
	@include transition(margin 0.2s ease-out);

	.lui-text-field {

		font-size: 16px;
		line-height: 2.5em;
		background-color: $lui-text-field-background-color;
		width: 100%;
		height: 2.5em;
		display: inline-block;
		position: relative;
		@include transition(background-color 0.2s ease-out);
		@include ease-out($property: height, $duration: 200ms);

		&.lui-is-top-rounded {
			.lui-text-field-focus-overline {
				z-index: 4;
				border-radius: 3px 3px 0px 0px;
			}
		}

		&.lui-is-bottom-rounded {
			.lui-text-field-focus-underline {
				z-index: 4;
				border-radius: 0px 0px 3px 3px;
			}
		}

		//Normal Text Field Styles
		//------------------------
		.lui-text-field-hint,
		.lui-text-field-floating-label,
		.lui-text-field-floating-icon-label {
			white-space: nowrap;
			text-overflow: ellipsis;
			width: 100%;
			overflow: hidden;
			position: absolute;
			line-height: 2.7em;
			color: $lui-disabled-text-color;
			opacity: 1;
			padding-left: 1em;
			padding-right: 1em;
			@include ease-out();
		}
		.lui-text-field-subtext-wrapper {
			position: absolute;
			width: 100%;
			height: 20px;
			overflow: hidden;
			@include transition(all 0.2s ease-out);

			&.lui-has-subtext{
				.lui-text-field-subtext{
					bottom: 0.5em;
				}
			}

			.lui-text-field-subtext {
				text-overflow: ellipsis;
				width: 100%;
				position: absolute;
				bottom: 2.1em;
				font-size: 0.7em;
				line-height: 0.7em;
				@include ease-out();
			}
		}
		.lui-text-field-input,
		.lui-text-field-textarea {
			position: relative;
			width: 100%;
			height: 100%;
			border: none;
			outline: none;
			background-color: transparent;
			color: $lui-text-field-color;
			padding-left: 1em;
			padding-right: 1em;
		}

		.lui-text-field-textarea {
			margin-top: 5px;
		}

		.lui-text-field-focus-overline {
			margin-bottom: -2px;
			background-color: $primary-1-color;
			height: 2px;
			border-bottom-width: 1px;
			border-radius: 3px 3px 0px 0px;
			@include transform(scaleX(0));
			@include ease-out();
		}

		.lui-text-field-focus-underline {
			margin-top: -2px;
			background-color: $primary-1-color;
			height: 2px;
			border-bottom-width: 1px;
			@include transform(scaleX(0));
			@include ease-out();
		}

		&.lui-has-error {
			.lui-text-field-subtext {
				color: $lui-text-field-error-color!important;
			}

			.lui-text-field-focus-underline,
			.lui-text-field-focus-overline {
				background-color: $lui-text-field-error-color!important;
				@include transform(scaleX(1));

			}
		}

		&.lui-is-success{
			.lui-text-field-subtext{
				color: $lui-text-field-success-color;
			}

			.lui-text-field-focus-underline,
			.lui-text-field-focus-overline{
				background-color: $lui-text-field-success-color;
			}
		}

		&.lui-is-alert{
			.lui-text-field-subtext{
				color: $lui-text-field-alert-color;
			}

			.lui-text-field-focus-underline,
			.lui-text-field-focus-overline{
				background-color: $lui-text-field-alert-color;
			}
		}

		&.lui-is-error{
			.lui-text-field-subtext{
				color: $lui-text-field-error-color;
			}

			.lui-text-field-focus-underline,
			.lui-text-field-focus-overline{
				background-color: $lui-text-field-error-color;
			}
		}

		&.lui-is-primary{

			.lui-text-field-subtext{
				color: $lui-text-field-primary-subtext-color;
			}

			.lui-text-field-focus-underline,
			.lui-text-field-focus-overline{
				background-color: $lui-text-field-primary-color;
			}
		}

		&.lui-is-secondary{

			.lui-text-field-subtext{
				color: $lui-text-field-secondary-subtext-color;
			}

			.lui-text-field-focus-underline,
			.lui-text-field-focus-overline{
				color: $lui-text-field-secondary-color;
			}
		}

		&.lui-has-value {
			.lui-text-field-hint {
				opacity: 0;
			}
		}

		&.lui-is-disabled {
			background: $lui-text-field-disabled-background-color;

			.lui-text-field-input {
				color: $lui-disabled-text-color;
			}

			.lui-text-field-underline {
				border: none;
				height: 40px;
				overflow: hidden;
			}
		}

		&.lui-is-focused {
			.lui-text-field-focus-underline {
				@include transform(scaleX(1));
			}

			.lui-text-field-focus-overline {
				@include transform(scaleX(1));
			}
		}


		//Floating Label Text Field Styles
		//--------------------------------
		&.lui-has-floating-labels {
			height: 2.5em;

			.lui-text-field-floating-label,
			.lui-text-field-floating-icon-label {
				top: -2px;
				@include transform-origin(left top);
				@include transform(scale(1) translate3d(0,0,0));
			}

			.lui-text-field-hint {
				top: -2px;
				opacity: 0;
			}

			.lui-text-field-input {
				padding-top: -2px;
			}

			&.lui-has-value,
			&.lui-is-focused {

				.lui-text-field-floating-icon-label {
					@include transform(scale(0.75) translate3d(-65px, -35px, 0));
				}
				.lui-text-field-floating-label {
					@include transform(scale(0.75) translate3d(-15px, -35px, 0));
				}
			}

			&.lui-has-value {
				.lui-text-field-floating-label,
				.lui-text-field-floating-icon-label {
					color: rgba($body-text-color, 0.5);
				}
			}

			&.lui-is-disabled {
				.lui-text-field-hint {
					color: $lui-disabled-text-color;
				}
			}

			&.lui-is-focused {

				.lui-text-field-hint {
					opacity: 1;
				}

				.lui-text-field-floating-label,
				.lui-text-field-floating-icon-label {
					color: $primary-1-color;
				}

				&.lui-has-error {
					.lui-text-field-floating-label,
					.lui-text-field-floating-icon-label {
						color: $lui-text-field-error-color!important;
					}
				}

				&.lui-has-value {
					.lui-text-field-hint {
						opacity: 0;
					}
				}
			}
		}
	}
}