//
// Forms
// --------------------------------------------------

// Textarea
textarea {
  font-size: ceil(@font-size-base * 1.071); // ~15px
  line-height: 24px;
  padding: 5px 11px;
}

// Label
label {
	font-weight: normal;
	line-height: @line-height-base * 1.1605em; // ~20px
}

// Placeholder
//
// Placeholder text gets special styles because when browsers invalidate entire
// lines if it doesn't understand a selector/
.form-control {
  .placeholder(desaturate(lighten(@brand-primary, 45%), 15%));
}

// Common form controls
//
// Shared size and type resets for form controls. Apply `.form-control` to any
// of the following form controls:
//
// select
// textarea
// input[type="text"]
// input[type="password"]
// input[type="datetime"]
// input[type="datetime-local"]
// input[type="date"]
// input[type="month"]
// input[type="time"]
// input[type="week"]
// input[type="number"]
// input[type="email"]
// input[type="url"]
// input[type="search"]
// input[type="tel"]
// input[type="color"]

.form-control {
  border: 2px solid @gray-light;
  color: @brand-primary;
  font-family: @font-family-base;
  font-size: @input-font-size-base;
  padding: 8px 12px;
  height: 42px;
  -webkit-appearance: none;
  border-radius: @input-border-radius;
  .box-shadow(none);
  .transition(~"border .25s linear, color .25s linear, background-color .25s linear");

  // Customize the `:focus` state
  .form-control-focus();

	// Disabled and read-only inputs
  // Note: HTML5 says that controls under a fieldset > legend:first-child won't
  // be disabled if the fieldset is disabled. Due to implementation difficulty,
  // we don't honor that edge case; we style them as disabled anyway.
  &[disabled],
  &[readonly],
  fieldset[disabled] & {
    background-color: @input-bg-disabled;
	  border-color: mix(@gray, white, 40%);
	  color: mix(@gray, white, 40%);
	  cursor: default;
  }  
  
  // Flat (without border)
  &.flat {
    border-color: transparent;
    
    &:hover {
      border-color: @gray-light;
    }
    &:focus {
      border-color: @brand-secondary;
    }
  }
}

// Form control sizing
.input-sm {
  .input-size(@input-height-small; 6px; 10px; @input-font-size-sm; @line-height-base);
}

.input-lg {
  .input-size(@input-height-large; 10px; 15px; @input-font-size-lg; @line-height-base);
}

.input-hg {
	.input-size(@input-height-huge; 10px; 16px; @input-font-size-hg; @line-height-base);
}

// Form control feedback states
//
// Apply contextual and semantic states to individual form controls.

// Warning
.has-warning {
  .form-control-validation(@brand-warning; @brand-warning);
}
// Error
.has-error {
  .form-control-validation(@brand-danger; @brand-danger);
}
// Success
.has-success {
  .form-control-validation(@brand-success; @brand-success);
}

// Form groups
//
// Designed to help with the organization and spacing of vertical forms. For
// horizontal forms, use the predefined grid classes.

.form-group {
	position: relative;
  margin-bottom: 20px;
}