// Forms
// Base styles for various input types, form layouts, and states

// Block level inputs
.input-block-level {
  display: block;
  width: 100%;
  min-height: 28px; // Make inputs at least the height of their button counterpart
  // Makes inputs behave like true block-level elements
  @include box-sizing(border-box);
}

// General styles

// Make all forms have space below them
.core-form {
  margin: 0 0 $baseLineHeight;

  fieldset {
    padding: 0;
    margin: 0;
    border: 0;
  }

  // Groups of fields with labels on top (legends)
  legend {
    display: block;
    width: 100%;
    padding: 0;
    margin-bottom: ($baseLineHeight * 1.5);
    font-size: ($baseFontSize * 1.5);
    line-height: ($baseLineHeight * 2);
    color: $grayDark;
    border: 0;
    border-bottom: 1px solid #eee;

    // Small
    small {
      font-size: ($baseLineHeight * .75);
      color: $grayLight;
    }
  }

  // Set font for forms
  label,
  input,
  button,
  select,
  textarea {
    @include font-shorthand($baseFontSize,normal,$baseLineHeight); // Set size, weight, line-height here
  }
  input,
  button,
  select,
  textarea {
    font-family: $baseFontFamily; // And only set font-family here for those that need it (note the missing label element)
  }

  // Identify controls by their labels
  label {
    display: block;
    margin-bottom: 5px;
    color: $grayDark;
  }

  // Inputs, Textareas, Selects
  input,
  textarea,
  select,
  .uneditable-input {
    display: inline-block;
    width: 210px;
    height: $baseLineHeight;
    padding: 4px;
    margin-bottom: 9px;
    font-size: $baseFontSize;
    line-height: $baseLineHeight;
    color: $grayDark;
    vertical-align: middle;
    border: 1px solid $inputBorder;
    border-radius: $borderRadiusMS;
  }
  .uneditable-textarea {
    width: auto;
    height: auto;
  }

  // Inputs within a label
  label input,
  label textarea,
  label select {
    display: block;
  }

  input[type="text"],
  input[type="password"],
  input[type="email"],
  input[type="number"],
  input[type="url"],
  input[type="search"],
  input[type="tel"]{
    text-indent:5px;
  }

  // Mini reset for unique input types
  input[type="image"],
  input[type="checkbox"],
  input[type="radio"] {
    width: auto;
    height: auto;
    padding: 0;
    margin: 3px 0;
    line-height: normal;
    cursor: pointer;
    @include border-radius(0);
    border: 0 \9; /* IE9 and down */
  }
  input[type="image"] {
    border: 0;
  }

  // Reset the file input to browser defaults
  input[type="file"] {
    width: auto;
    padding: initial;
    line-height: normal;
    border: initial;
    background-color: $inputBackground;
    background-color: initial;
    height: auto;
    box-shadow: none;
  }

  // Help out input buttons
  input[type="button"],
  input[type="reset"],
  input[type="submit"] {
    width: auto;
    height: auto;
  }

  // Set the height of select and file controls to match text inputs
  // Chrome on Linux and Mobile Safari need background-color
  select {
    width: 220px; // default input width + 10px of padding that doesn't get applied
    background-color: $inputBackground;
    height: 28px; // In IE7, the height of the select element cannot be changed by height, only font-size
    line-height: 28px;
  }

  // Make multiple select elements height not fixed
  select[multiple],
  select[size] {
    height: auto;
  }

  // Remove shadow from image inputs
  input[type="image"] {
    box-shadow: none;
  }

  // Make textarea height behave
  textarea {
    height: auto;
  }

  // Hidden inputs
  input[type="hidden"] {
    display: none;
  }

  // Phone numbers
  input.tel {
    direction: ltr; // force left to right writing mode
    unicode-bidi: bidi-override;
  }

  // Checkbox & radio

  // Indent the labels to position radios/checkboxes as hanging
  .radio,
  .checkbox {
    @include padding-left($rtl, 18px);
  }
  .radio input[type="radio"],
  .checkbox input[type="checkbox"] {
    @include float-left($rtl);
    @include margin-left($rtl, -18px);
  }

  // Move the options list down to align with labels
  .controls > .radio:first-child,
  .controls > .checkbox:first-child {
    padding-top: 5px; // has to be padding because margin collaspes
  }

  // Radios and checkboxes on same line
  // TODO v3: Convert .inline to .control-inline
  .radio.inline,
  .checkbox.inline {
    display: inline-block;
    padding-top: 5px;
    margin-bottom: 0;
    vertical-align: middle;
  }
  .radio.inline + .radio.inline,
  .checkbox.inline + .checkbox.inline {
    margin-left: 10px; // space out consecutive inline controls
  }

  // Focus state

  input,
  textarea {
    box-shadow: none;
    @include transition(unquote("border .2s, box-shadow .2s"));
  }
  input:focus,
  textarea:focus {
    border-color: $inputBorderFocus;
    box-shadow: 0 0 5px rgba($inputBorderFocus, (20/100));
    outline: 0;
    outline: thin dotted \9; // IE 6-9
  }
  input[type="file"]:focus,
  input[type="radio"]:focus,
  input[type="checkbox"]:focus,
  select:focus {
    box-shadow: none; // override for file inputs
    @include tab-focus();
  }

  // General classes for quick sizes

  $size-mini: 60px;
  $size-small: 90px;
  $size-medium: 150px;
  $size-large: 210px;
  $size-xlarge: 270px;
  $size-xmlarge: 400px;
  $size-xxlarge: 530px;

  .input-mini { width: $size-mini; }
  .input-small { width: $size-small; }
  .input-medium { width: $size-medium; }
  .input-large { width: $size-large; }
  .input-xlarge { width: $size-xlarge; }
  .input-xmlarge { width: $size-xmlarge; }
  .input-xxlarge { width: $size-xxlarge; }

  .input-fullwidth {
        @include box-sizing(border-box);
        width: 100%;
        height: auto;
  }

  select.input-small { width: ($size-small + 10px); }
  select.input-medium { width: ($size-medium + 10px); }
  select.input-large { width: ($size-large + 10px); }
  select.input-xlarge { width: ($size-xlarge + 10px); }
  select.input-xxlarge { width: ($size-xxlarge + 10px); }

  // Grid style input sizes

  input[class*="span"],
  select[class*="span"],
  textarea[class*="span"],
  .uneditable-input {
    float: none;
    margin-left: 0;
  }

  // Disabled and read-only inputs

  input[disabled],
  select[disabled],
  textarea[disabled],
  input[readonly],
  select[readonly],
  textarea[readonly] {
    background-color: $inputDisabledBackground;
    border-color: #ddd;
    cursor: not-allowed;
  }

  // Error

  .control-group.error {
    > label, .help-block, .help-inline {
      color: $errorText;
    }

    input, select, textarea {
      border-color: $errorText;
      box-shadow: 0 0 6px rgba($errorText, (40/100));

      &:focus {
        border-color: $blue2;
        box-shadow: 0 0 5px rgba($inputBorderFocus, (20/100));
      }
    }

    .input-append {
      .btn {
        @if $rtl == false { @mixin border-right-color($rtl){ border-right-color: $errorText; }}
        @if $rtl == true { @mixin border-right-color($rtl){ border-left-color: $errorText; }}

        border-top-color: $errorText;
        @include border-right-color($rtl);
        border-bottom-color: $errorText;
        box-shadow: 0 0 6px rgba($errorText, (40/100));
      }

      input:focus + .btn {
        @if $rtl == false { @mixin border-right-color($rtl){ border-right-color: $blue2; }}
        @if $rtl == true { @mixin border-right-color($rtl){ border-left-color: $blue2; }}

        border-top-color: $blue2;
        @include border-right-color($rtl);
        border-bottom-color: $blue2;
        box-shadow: 0 0 5px rgba($inputBorderFocus, (20/100));
      }
    }
  }

  // Success

  .control-group {
    .control-success {
      display: none;
      color: $successText;
    }
  }

  .control-group.success {
    .control-success {
      display: block;
    }
  }

  // Disabled

  .control-group.disabled {
    label {
      color: lighten($gray, 10%);
      cursor: not-allowed;
    }
    .help-block, .help-inline {
      color: lighten($gray, 25%);
    }
  }

  // Form actions

  .form-actions {
    padding: $baseLineHeight $spacingL;
    margin-top: $baseLineHeight;
    margin-bottom: $baseLineHeight;
    @include clearfixHack();
  }

  // For text that needs to appear as an input but should not be an input
  .uneditable-input {
    display: block;
    background-color: $inputBackground;
    border-color: #eee;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.025);
    cursor: not-allowed;
  }

  // Placeholder text gets special styles; can't be bundled together though for some reason
  @include placeholder($grayLight);

  // Help texts

  .help-block,
  .help-inline {
    color: $gray; // lighten the text some for contrast
  }

  .help-block {
    display: block; // account for any element using help-block
    margin-bottom: $baseLineHeight / 2;
  }

  .help-inline {
    display: inline-block;
    vertical-align: middle;
    @include padding-left($rtl, 5px);
  }

  // Input groups

  @if $rtl == false { @mixin radius-right($rtl){ @include border-radius(0 $borderRadiusXs $borderRadiusXs 0); }}
  @if $rtl == true { @mixin radius-right($rtl){ @include border-radius($borderRadiusXs 0 0 $borderRadiusXs); }}

  @if $rtl == false { @mixin radius-left($rtl){ @include border-radius($borderRadiusXs 0 0 $borderRadiusXs); }}
  @if $rtl == true { @mixin radius-left($rtl){ @include border-radius(0 $borderRadiusXs $borderRadiusXs 0); }}

  // Allow us to put symbols and text within the input field for a cleaner look
  .input-prepend,
  .input-append {
    margin-bottom: 5px;

    input,
    select,
    .uneditable-input {
      @include radius-right($rtl);
    }

    .uneditable-input {
      border-left-color: #ccc;
    }

    .btn {
      @include radius-left($rtl);
    }

    .btn {
      padding-bottom: 4px;
      padding-top: 4px;
      height: $baseLineHeight;
      @include box-sizing(content-box);
    }

    .active {
      background-color: lighten($green, 30);
      border-color: $green;
    }
  }

  .input-prepend {
    .btn {
      @include margin-right($rtl, -1px);
    }
  }

  .input-append {
    input,
    select
    .uneditable-input {
      @include radius-left($rtl);
    }

    input:focus + .btn,
    input:focus + .custom-select {
      @if $rtl == false { @mixin border-right-color($rtl){ border-right-color: $blue2; }}
      @if $rtl == true { @mixin border-right-color($rtl){ border-left-color: $blue2; }}

      border-top-color: $blue2;
      @include border-right-color($rtl);
      border-bottom-color: $blue2;
      box-shadow: 0 0 5px rgba($inputBorderFocus, (20/100));
    }

    .uneditable-input {
      border-left-color: #eee;
      border-right-color: #ccc;
    }

    .btn {
      @include margin-left($rtl, -1px);
      @include radius-right($rtl);
    }
  }
  // Remove all border-radius for inputs with both prepend and append
  .input-prepend.input-append {
    input,
    select,
    .uneditable-input {
      @include border-radius(0);
    }
    .btn:first-child {
      @include margin-right($rtl, -1px);
      @include radius-left($rtl);
    }
    .btn:last-child {
      @include margin-left($rtl, -1px);
      @include radius-right($rtl);
    }
  }

  // Margin to space out fieldsets
  .control-group {
    margin-bottom: $baseLineHeight / 2;
  }

  // Legend collapses margin, so next element is responsible for spacing
  legend + .control-group {
    margin-top: $baseLineHeight;
    -webkit-margin-top-collapse: separate;
  }
}

// Horizontal & vertical forms

.form-inline,
.form-horizontal {
  input,
  textarea,
  select,
  .help-inline,
  .uneditable-input,
  .input-prepend,
  .input-append {
    display: inline-block;
    margin-bottom: 0;
  }
  // Re-hide hidden elements due to specifity
  .hide {
    display: none;
  }
}

.form-inline label {
  display: inline-block;
}

// Remove margin for input-prepend/-append
.form-inline .input-append,
.form-search .input-prepend,
.form-inline .input-prepend {
  margin-bottom: 0;
}

// Inline checkbox/radio labels (remove padding on left)
.form-search .radio,
.form-search .checkbox,
.form-inline .radio,
.form-inline .checkbox {
  padding-left: 0;
  margin-bottom: 0;
  vertical-align: middle;
}

// Remove float and margin, set to inline-block
.form-search .radio input[type="radio"],
.form-search .checkbox input[type="checkbox"],
.form-inline .radio input[type="radio"],
.form-inline .checkbox input[type="checkbox"] {
  @include float-left($rtl);
  @include margin-left($rtl, 0);
  @include margin-right($rtl, $spacingXs);
}

// Horizontal-specific styles

.form-horizontal {
  // Increase spacing between groups
  .control-group {
    margin-bottom: $baseLineHeight;
    @include clearfixHack();
  }
  // Float the labels left
  .control-label {
    @include float-left($rtl);
    width: 140px;
    padding-top: 5px;
    @include text-align-left($rtl);
  }
  // Move over all input controls and content
  .controls {
    @include margin-left($rtl, 160px);
  }
  // Remove bottom margin on block level help text since that's accounted for on .control-group
  .help-block {
    margin-top: ($baseLineHeight / 2);
    margin-bottom: 0;
  }
  // Move over buttons in .form-actions to align with .controls
  .form-actions {
    @include padding-left($rtl, 160px);
  }
}