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


// Normalize non-controls
//
// Restyle and baseline non-control form elements.

legend {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: @line-height-computed / 2;
  font-size: (@component-font-size-base * 1.6); // ~24px
  line-height: inherit;
  color: @legend-color;
  border-bottom: none;
}

// Normalize form controls

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

// Search
input[type="search"] {
  -webkit-appearance: none !important; // removes rounded corners for searchfields on iOS
}


// Label
label {
  font-weight: normal;
  font-size: @component-font-size-base;
  line-height: 2.4; // ~36px
}

// 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;
  line-height: @input-line-height-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;
    .opacity(.7);
  }  
  
  // 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-small; @input-line-height-small);
}

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

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

// 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);
}

// Help text
//
// Apply to any element you wish to create light text for placement immediately
// below a form control. Use for general help, formatting, or instructional text.

.help-block {
  font-size: @component-font-size-base;
  margin-bottom: 5px;
  color: inherit;
}

// 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;
}

// Horizontal forms
//
// Horizontal forms are built on grid classes and allow you to create forms with
// labels on the left and inputs on the right.

.form-horizontal {

  // Consistent vertical alignment of labels, radios, and checkboxes
  .control-label,
  .radio,
  .checkbox,
  .radio-inline,
  .checkbox-inline {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 6px;
  }

  // Make form groups behave like rows
  .form-group {
    .make-row();
  }

  .form-control-static {
    padding-top: 6px;
  }
}