//
// Input groups
// --------------------------------------------------


// Sizing options
//
// Remix the default form control sizing classes into new ones for easier
// manipulation.

.input-group-hg > .form-control,
.input-group-hg > .input-group-addon,
.input-group-hg > .input-group-btn > .btn { .input-hg(); }
.input-group-lg > .form-control,
.input-group-lg > .input-group-addon,
.input-group-lg > .input-group-btn > .btn { .input-lg(); }
.input-group-sm > .form-control,
.input-group-sm > .input-group-addon,
.input-group-sm > .input-group-btn > .btn { .input-sm(); }

// Text input groups
// -------------------------
.input-group-addon {
  padding: 10px 12px;
  font-size: @component-font-size-base; // ~15px
  color: @inverse;
  text-align: center;
  background-color: @gray-light;
  border: 1px solid @gray-light;
  border-radius: @border-radius-large;
  .transition(~"border .25s linear, color .25s linear, background-color .25s linear");

  // Sizing
  .input-group-sm & {
    padding: 6px 10px;
    font-size: @input-font-size-sm; // ~13px
    line-height: 1;
    border-radius: @border-radius-large;
  }
  .input-group-lg & {
    padding: 10px 15px;
    font-size: @input-font-size-lg; // ~17px
    line-height: 1;
  }
  .input-group-hg & {
    padding: 10px 16px;
    font-size: @input-font-size-hg; // ~22px
    line-height: 1;
  }
}

// Reset rounded corners
.input-group .form-control:first-child,
.input-group-addon:first-child,
.input-group-btn:first-child > .btn,
.input-group-btn:first-child > .dropdown-toggle,
.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) {
  .border-right-radius(0);
}
.input-group-addon:first-child {
  border-right: 0;
}
.input-group .form-control:last-child,
.input-group-addon:last-child,
.input-group-btn:last-child > .btn,
.input-group-btn:last-child > .dropdown-toggle,
.input-group-btn:first-child > .btn:not(:first-child) {
  .border-left-radius(0);
}
.input-group-addon:last-child {
  border-left: 0;
}

// Focus State
.form-group.focus,
.navbar-form.focus {
  .input-group-addon {
    background-color: @brand-secondary;
    border-color: @brand-secondary;
  }
  .input-group-btn {
    > .btn-default + .btn-default {
      border-left-color: mix(@brand-secondary, black, 85%);
    }
    .btn {
	    border-color: @brand-secondary;
	    background-color: @inverse;
	    color: @brand-secondary;
    }
    .btn-default {
    	.button-variant(@btn-default-color, @brand-secondary, @btn-primary-hover-bg, @btn-primary-active-bg);
    }
  }
  .input-group-btn:first-child {
	  .btn {
	  	color: @brand-secondary;
		  border-color: @brand-secondary;
	  }
  }
}

// Default buttons
.input-group {
	.input-group-btn {		
		.btn {
			background-color: @inverse;
			border: 2px solid @gray-light;
			border-width: 2px 2px 2px 0;			
			color: @gray-light;
			margin-left: -2px;
			line-height: 18px;
		}	
		.btn-default {
			.button-variant(@btn-default-color, @gray-light, @btn-hover-bg, @btn-active-bg);
		}
		.input-group-sm& .btn {
			line-height: 16px;
		}	
	}
	.input-group-btn:first-child {	
		& + .form-control {
			border-left: none !important;
			padding-left: 0;
		}	
		.btn {
			background-color: @inverse;
			border: 2px solid @gray-light;
			border-width: 2px 0 2px 2px;			
			color: @gray-light;			
			line-height: 18px;
		}
		.btn-default {
			.button-variant(@btn-default-color, @gray-light, @btn-hover-bg, @btn-active-bg);
		}
		.input-group-sm& .btn {
			line-height: 16px;
		}
	} 
}

// Button input groups
// -------------------------
.input-group-btn > .btn-default {
  // Jankily prevent input button groups from wrapping
  + .btn-default {
    border-left: 2px solid @gray-light;
    margin-left: -4px;
  }
}

// Rounded input groups
.input-group-rounded {
	.form-control:last-child,
	.input-group-btn:last-child .btn {
		border-radius: 0 20px 20px 0;
		
		.input-group-hg& {
			border-radius: 0 27px 27px 0;
		}
		.input-group-lg& {
			border-radius: 0 25px 25px 0;
		}
	}	
	.form-control:first-child,
	.input-group-btn:first-child .btn {
		border-radius: 20px 0 0 20px;
		
		.input-group-hg& {
			border-radius: 27px 0 0 27px;
		}
		.input-group-lg& {
			border-radius: 25px 0 0 25px;
		}
	}	
}