// Floating & Form Line Input

@mixin input-variant($color) {
	
	.form-control {

		border-bottom: 1px solid $color;

		&.edited:not([readonly]),
		&.form-control-static,
		&:focus:not([readonly]),
		&.focus:not([readonly]) {  

			~ label,
			~ .form-control-focus {
				&:after {
					background: $color; 
				}        
			}

			~ label {				   
				color: $color;   
			}  

			~ i {
				color: $color;
			}

			~ .help-block {
				color: $color;
			}
		}
	}   	

	.input-group-addon {
		color: $color;
		border-bottom: 1px solid $color;
	}

	label {
		color: $color;     
	}
}

.form-group.form-md-line-input {  
	position: relative;    
  	margin: 0 0 35px 0;  
  	padding-top: 20px;     

  	//&:last-child { remove to fix mobile mode issue
  		//margin-bottom: 10px;
  	//}

	.form-horizontal & {
		padding-top: 10px;
		margin-bottom: 20px;  
		margin: 0 -15px 20px -15px; 
	}	

  	.form-horizontal & > label {
  		padding-top: 5px;
  		font-size: $input-md-label-font-size;
		color: $input-md-label-color;     
		@include opacity($input-md-label-opacity);	
  	}

	.form-control {     
		background: none;
		border: 0;
		border-bottom: 1px solid $input-md-input-border; 
		@include placeholder($input-md-placeholder);  
		@include border-radius(0);   
		color: $input-md-color;  
		box-shadow: none;
		
		&.form-control-static {
			border-bottom: 0;
		}

		padding-left: 0;     
		padding-right: 0;   
		font-size: 14px;

		&.input-sm {  
			font-size: 14px;
			padding: 6px 0;
		}   

		&.input-lg {   
			font-size: 20px;	
			padding: 14px 0;
		}

		~ label,   
		~ .form-control-focus {
			width: 100%;
			position: absolute;  
			left: 0;       
			bottom: 0;  
			pointer-events: none;

			.form-horizontal & {
				width: auto;
				left: 15px;
				right: 15px; 
			}

			&:after {
				content: '';  
			  	position: absolute;
			  	z-index: 5;
			  	bottom: 0;
			  	left: 50%;
			  	width: 0;   
			  	height: 2px;
			  	width: 0;  
			  	visibility: hidden;
			  	transition: 0.2s ease all;
			}
		}   

		~ label {    
			top: 0;  
			margin-bottom: 0;
			font-size: $input-md-label-font-size;
			color: $input-md-label-color;     
			@include opacity($input-md-label-opacity);  
		}     

		~ .help-block-error {
			@include opacity(1);
		}
   
   		&.edited:not([readonly]),
		&:focus:not([readonly]) {
			~ label,   
			~ .form-control-focus {
				color: $input-md-label-color;  
				   
				&:after {
					visibility: visible;  
					left: 0;
					width: 100%; 
			  		background: $input-md-focus-border;
				}  
			}
   
			~ label {
				@include opacity(1);
			}

			~ .help-block {
				color: $input-md-focus-border;     
				@include opacity(1);
			}

			~ .help-block-error {
				@include opacity(0);
			}
		}  
 
		&.edited:not([readonly]):not(:focus) {
			~ .help-block {  
				@include opacity(0);
			}

			~ .help-block-error {
				@include opacity(0);
			}
		}  

	 	&[readonly], 
		&[disabled],   
	    fieldset[disabled] & {
	    	background: none;
	        cursor: not-allowed;
  			border-bottom: 1px dashed $input-border;
	    }   
	}

	&.form-md-floating-label {
		.form-control {

		   	~ label {          
		   		font-size: 16px;
				top: 25px;       
				transition: 0.2s ease all;
				color: $input-md-placeholder;
		   	}   

			&[readonly],
		   	&.edited,
		   	&.form-control-static,   
		   	&:focus:not([readonly]),  
			&.focus:not([readonly]) {			 
				~ label {
					top: 0; 
					font-size: 13px;            
				}   
			}     

			&.input-sm {
				~ label {     
			   		font-size: 14px;
					top: 24px;  
			   	}  

				&[readonly],
				&.form-control-static,  
			   	&.edited,
			   	&:focus:not([readonly]),  
				&.focus:not([readonly]) {			   
					~ label {      
						top: 0; 
						font-size: 13px;            
					}
				}  
			}

			&.input-lg {
				~ label {     
			   		font-size: 20px;
					top: 30px;      
			   	}     

				&[readonly],
			   	&.edited,
			   	&.form-control-static,
			   	&:focus:not([readonly]),        
				&.focus:not([readonly]) {			        
					~ label {
						top: 0;       
						font-size: 13px;                 
					}
				}  
			}
		}

		.input-icon > label {
			padding-left: 34px;
		}   

		.input-icon.right > label {
			padding-left: 0;
			padding-right: 34px;
		}

		.input-group.left-addon {
			label {
				padding-left: 34px;   
			}
		}
     
		.input-group.right-addon {
			label {
				padding-right: 34px;
			}   
		} 
	}  
  
  	& + .input-icon {
  		padding-top: 0;
  	}


	// Help block

	.help-block { 
		position: absolute;
	  	margin: 2px 0 0 0;   
	  	@include opacity(0);   
	  	font-size: 13px;
	}

	// Input icons

	> .input-icon {

		> i {
			left: 0;
        	bottom: 0;
        	margin: 9px 2px 10px 10px; 
			color: $input-md-label-color;
		}  

		&.input-icon-lg > i {
			top: 6px;
		}

		&.input-icon-sm > i {
			top: -1px;
		}

		.form-control {
			padding-left: 34px;      
		}

		> label {
			margin-top: -20px;  
		}

		&.right {
			.form-control {
				padding-left: 0;
				padding-right: 34px;        
			}

			> i {
				left: auto;
				right: 8px;
				margin: 11px 2px 10px 10px;
			}
		}
	}

	// Input groups
  
	& + .input-group {
  		padding-top: 0;
  	} 

	.input-group {
		padding-top: 0;

		> label {
			margin-top: -20px;  
		}

		.input-group-addon {
			@include border-radius(0);  
			background: none;
			border: 0;    
			border-bottom: 1px solid $input-border;     		
		}

		& + .input-group-control {
  			padding-top: 0;
  		}	

		.input-group-control {  
			padding-top: 0;
			position: relative;
			display: table-cell;
  			vertical-align: bottom;

  			> label {
  				margin-top: -20px;
  			}
		}

		.input-group-btn {
			.btn {
				@include border-radius($general-border-radius);
			}
		}

		.input-group-btn.btn-left .btn {
			margin-right: 10px;
		}

		.input-group-btn.btn-right .btn {
			margin-left: 10px;
		}

		.help-block {
			margin-top: 35px;
		}

		&.input-group-sm .help-block {
			margin-top: 30px;  
		}

		&.input-group-lg .help-block {
			margin-top: 47px;  
		}
	}

	// States

	&.has-success {   
		@include input-variant($state-success-text);
	}

	&.has-warning {
		@include input-variant($state-warning-text);
	}

	&.has-error {
		@include input-variant($state-danger-text);
	}   

	&.has-info {
		@include input-variant($state-info-text);
	}
} 

// Inline forms

.form-inline {
	.form-md-line-input {
		margin: 0;
		padding-top: 0;
		margin-right: 20px;

		> .input-icon {
			padding: 0;
		}
	}
}

// Horizontal forms

.form-horizontal {
	.form-group.form-md-line-input {
		.input-icon {
			.form-control {
				padding-left: 33px;
			}

			> i {
				top: 0;
			}

			&.right {
				.form-control {
					padding-left: 0;
					padding-right: 33px;
				}
			}

			> .form-control-focus {
				left: 0 !important;
				right: 0 !important;
			}
		}
	}

	.form-group.form-md-line-input {
		.input-group {
	  		padding-top: 0;

	  		> .input-group-btn {
	  			.btn {
	  				margin-bottom: 0 !important;  
	  			}
	  		}

	  		> .input-group-control {
				padding-top: 0;

	  			> .form-control-focus {
	  				left: 0 !important;
					right: 0 !important;
	  			}
	  		}

			> .form-control-focus {
				left: 0 !important;
				right: 0 !important;
			}
		}
	}
}