// ==========================================================================
// eForm Material Form Elements, input-fields
// ==========================================================================
.#{$selector} {
	/* Text Inputs + Textarea
		 ========================================================================== */

	/* Style Placeholders */

	::-webkit-input-placeholder {
		color: $placeholder-text-color;
	}

	:-moz-placeholder { /* Firefox 18- */
		color: $placeholder-text-color;
	}

	::-moz-placeholder {  /* Firefox 19+ */
		color: $placeholder-text-color;
	}

	:-ms-input-placeholder {
		color: $placeholder-text-color;
	}

	/* Text inputs */

	input:not([type]).ipt_uif_text,
	input[type=text].ipt_uif_text,
	input[type=password].ipt_uif_text,
	input[type=email].ipt_uif_text,
	input[type=url].ipt_uif_text,
	input[type=time].ipt_uif_text,
	input[type=date].ipt_uif_text,
	input[type=datetime].ipt_uif_text,
	input[type=datetime-local].ipt_uif_text,
	input[type=tel].ipt_uif_text,
	input[type=number].ipt_uif_text,
	input[type=search].ipt_uif_text,
	textarea.ipt_uif_textarea {

		// General Styles
		background-color: transparent;
		border: none;
		border-bottom: $input-border;
		border-radius: 0;
		outline: none;
		height: $input-height;
		width: 300px;
		max-width: 100%;
		&.fit,
		&.large-text {
			width: 100%;
		}
		font-size: $input-font-size;
		margin: $input-margin;
		padding: $input-padding;
		box-shadow: none;
		box-sizing: content-box;
		transition: $input-transition;
		color: $primary-text-color;

		// Disabled input style
		&:disabled,
		&[readonly="readonly"] {
			color: $input-disabled-color;
			border-bottom: $input-disabled-border;
		}

		// Disabled label style
		&:disabled+label,
		&[readonly="readonly"]+label {
			color: $input-disabled-color;
		}

		// Focused input style
		&:focus:not([readonly]) {
			border-bottom: 1px solid $input-focus-color;
			box-shadow: 0 1px 0 0 $input-focus-color;
			color: $secondary-text-color;
		}

		// Focused label style
		&:focus:not([readonly])+label {
			color: $input-focus-color;
		}

		// Valid Input Style
		&.valid,
		&:focus.valid {
			border-bottom: 1px solid $input-success-color;
			box-shadow: 0 1px 0 0 $input-success-color;
		}

		// Custom Success Message
		&.valid + label:after,
		&:focus.valid + label:after {
			content: attr(data-success);
			color: $input-success-color;
			opacity: 1;
		}

		// Invalid Input Style
		&.invalid,
		&:focus.invalid {
			border-bottom: $input-invalid-border;
			box-shadow: 0 1px 0 0 $input-error-color;
		}

		// Custom Error message
		&.invalid + label:after,
		&:focus.invalid + label:after {
			content: attr(data-error);
			color: $input-error-color;
			opacity: 1;
		}

		// Full width label when using validate for error messages
		&.validate + label {
			width: 100%;
			pointer-events: none;
		}

		// Form Message Shared Styles
		& + label:after {
			display: block;
			content: "";
			position: absolute;
			top: 60px;
			opacity: 0;
			transition: .2s opacity ease-out, .2s color ease-out;
		}
	}

	// Styling for input field wrapper
	.input-field {
		// Inline styles
		&.inline {
			display: inline-block;
			vertical-align: middle;
			margin-left: 5px;

			input,
			.select-dropdown {
				margin-bottom: 1em;
			}
		}

		// Gutter spacing
		&.col {
			label {
				left: $grid-gutter-width / 2;
			}

			.prefix ~ label,
			.prefix ~ .validate ~ label {
				width: calc(100% - 3em - #{$grid-gutter-width});
			}
		}

		position: relative;
		margin-top: 0.5em;

		@media screen and ( min-width: $screen-md-min ) {
			margin-top: 0;
		}

		label {
			color: $input-border-color;
			position: absolute;
			top: 0.8em;
			left: 0;
			font-size: 1em;
			cursor: text;
			transition: .2s ease-out;
			font-weight: 300;
		}

		label.active {
			font-size: $label-font-size;
			transform: translateY(-140%);
			font-weight: 400;
		}

		// Prefix Icons
		.prefix {
			position: absolute;
			width: 1.5em;
			font-size: 2em;
			transition: color .2s;
			color: $secondary-text-color;

			&.active { color: $input-focus-color; }
		}

		.prefix ~ input,
		.prefix ~ textarea,
		.prefix ~ label,
		.prefix ~ .validate ~ label,
		.prefix ~ .autocomplete-content {
			margin-left: 3em;
			width: 92%;
			width: calc(100% - 3em);
		}

		.prefix ~ label { margin-left: 3em; }

		@media #{$medium-and-down} {
			.prefix ~ input {
				width: 86%;
				width: calc(100% - 3em);
			}
		}

		@media #{$small-and-down} {
			.prefix ~ input {
				width: 80%;
				width: calc(100% - 3em);
			}
		}
	}

	.ipt_uif_question_others {
		.input-field {
			margin-top: 1.5em;
		}
	}

	/* Search Field */

	.input-field input[type=search] {
		display: block;
		line-height: inherit;
		padding-left: 4em;
		width: calc(100% - 4em);

		&:focus {
			background-color: $input-background;
			border: 0;
			box-shadow: none;
			color: #444;

			& + label i,
			& ~ .mdi-navigation-close,
			& ~ .material-icons {
				color: #444;
			}
		}

		& + label {
			left: 1em;
		}

		& ~ .mdi-navigation-close,
		& ~ .material-icons {
			position: absolute;
			top: 0;
			right: 1em;
			color: transparent;
			cursor: pointer;
			font-size: 2em;
			transition: .3s color;
		}
	}


	/* Textarea */

	// Default textarea
	textarea.ipt_uif_textarea {
		width: 100%;
		background-color: transparent;
		padding: .8em 0 1.6em 0; /* prevents text jump on Enter keypress */
		resize: none;
		min-height: $input-height;
		height: auto;
	}
}

// For textarea autoresize
.hiddendiv {
	display: none;
	white-space: pre-wrap;
	word-wrap: break-word;
	overflow-wrap: break-word; /* future version of deprecated 'word-wrap' */
	padding-top: 1.2em; /* prevents text jump on Enter keypress */
}