/*

Forms

Individual form controls receive default styling with `form` Results in
stacked, left-aligned labels on top of form controls.

    form
      +–– .form__group
      |    |–– .form__label
      |    +–– .form__controls
      |         |–– input
      |         |–– textarea
      |         |–– .form__select
      |         |–– .form__checkbox
      |         |–– .form__radio
      |         +–– .form__addon
      +–– .form__actions

* **`.form__group`**: Main container of a section of the form
    * **`.form__label`**: Main labels for the form.
    * **`.form__controls`**: Container of inputs, buttons and addons
        * **`.form__checkbox`**, **`.form__radio`**: Stacked list of checkboxes and radios.
        * **`.form__checkbox.inline`**, **`.form__radio.inline`**: Inline list of checkboxes and radios.
        * **`.form__select`**: Create custom style selects.
        * **`.form__help--block`**: Block help text that appears under form controls.
        * **`.form__help--inline`**: Inline help text that appears aside form controls.
* **`.form__actions`**: End a form with a group of actions (buttons). When placed within a `.form__actions`, the buttons will automatically indent to line up with the form controls.

Styleguide 8

*/

@if $forms {

form {
    @extend %clearfix;
    margin: 0 0 rhythm();
}

fieldset {
    @extend %no-padding;
    @extend %no-margin;
    @extend %no-border;
}

legend {
    @include adjust-font-size-to($h5-size);
    @extend %display-block;
    @extend %no-padding;
    width: 100%;
    @extend %font-weight-bold;
    @extend %no-border;
    padding-bottom: rhythm(.5);
    margin-bottom: rhythm(.5);
    border-bottom: 1px solid #e5e5e5;
    small {
        font-size: em($base-font-size);
        color: $grayLight;
    }
}

input,
button,
select,
textarea {
    font-family: $base-font-family;
    @include border-radius($base-border-radius);
}

label {
    line-height: $input-height/2;
    @extend %display-block;
}

.input-text,
.form__input,
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"] {
    @extend %display-inline-block;
    padding: 0 $input-padding-side;
    height: $input-height;
    border-width: $input-border;
    border-style: solid;
    line-height/*\**/: #{$input-height}\9; // Ugly IE8 Hack
    @extend %input !optional; // Backward compatibility
    @extend %form__input !optional;

    &:focus {outline: 0;}
}

select {
    @extend %display-inline-block;
}

input,
textarea {
    width: 240px;
}

textarea {
    height: auto;
    line-height: rhythm(1);
    padding: $input-padding;
}


input[type="radio"],
input[type="checkbox"] {
    margin: em(1px) 0 0;
}

input[type="file"],
input[type="image"],
input[type="submit"],
input[type="reset"],
input[type="button"],
input[type="radio"],
input[type="checkbox"] {
    width: auto;
}

select,
.form__select {
    width: 240px;
}

select[multiple],
select[size] {
    height: auto;
}

@include placeholder($placeholder-color);

input[readonly],
select[readonly],
textarea[readonly] {
  @extend %cursor-default;
}

input[disabled],
select[disabled],
textarea[disabled],{
    cursor: not-allowed;
}

input[type="radio"][disabled],
input[type="checkbox"][disabled],
input[type="radio"][readonly],
input[type="checkbox"][readonly] {
    background-color: transparent;
}
input:focus:invalid,
textarea:focus:invalid,
select:focus:invalid {
    color: #b94a48;
    border-color: #ee5f5b;
    &:focus {
        border-color: darken(#ee5f5b, 10%);
    }
}
// }


.form__group { position: relative; }
.form__group + .form__group { margin-top: em($control-margin-bottom); }

.form__controls {
  @extend %clearfix;
  position: relative;
  @extend %display-inline-block;
}


/*

Labels

Main labels for the form using `.form__label`

Markup: <label class="form__label">Label</label>

Styleguide 8.1

*/

.form__label {
    @extend %font-weight-bold;
    margin-bottom: em($label-margin-bottom);
    cursor: auto;
    @extend %form__label !optional;
}


/*

Radio & Checkbox

Markup:
<div class="form__controls">
  <label class="form__radio {$modifiers}">
    <input type="radio" value="option1" checked> Option one is this
  </label>
  <label class="form__radio {$modifiers}">
    <input type="radio" value="option2"> Option two can be something else
  </label>
</div>

.inline - Inline alignment with `.inline`

Styleguide 8.2

*/

.form__radio,
.form__checkbox,
.form__select {
    padding-left: em($checkbox-padding-left);
    @extend %font-weight-normal;
    @extend %cursor-pointer;
    @extend %display-block;
}

.form__select {padding-left: 0;}

.form__radio input[type="radio"],
.form__checkbox input[type="checkbox"] {
    @extend %float-left;
    margin-left: -20px;
}
.form__radio.inline,
.form__checkbox.inline {
    @extend %display-inline-block;
}
.form__radio.inline + .form__radio.inline,
.form__checkbox.inline + .form__checkbox.inline {
    margin-left: 20px;
}

/*

Custom Select

Add custom styling to a select element wrapping the `<select>` with a `<span>`
with class `.form__select`.

Markup:
<span class="form__select">
  <select>
    <option selected="selected">Select Country</option>
    <option>United States</option>
    <option>United Kingdom</option>
    <option>Italy</option>
    <option>France</option>
    <option>Germany</option>
  </select>
</span>

If is not possibile to directly add the span it's also available a script
for adding them on load (only if necessary).

Include this js after including rapido.js.

    $.rapido_Select();

**Options** (with default values):

    selectClass:      .form__select

Styleguide 8.3

*/

.form__select {
    @extend %caret !optional;
    @extend %select !optional; // Backward compatibility
    @extend %form__select !optional;
    @include border-radius($base-border-radius);
    @extend %display-inline-block;
    border-style: solid;
    border-width: $input-border;
    @extend %cursor-pointer;
    height: $input-height;
    line-height: 1em;
    margin-bottom: 0;
    padding: $input-padding;
    position: relative;
    width: 240px;

    select {
        @extend %appearance-none;
        background-color:transparent;
        background-image:none;
        border:none;
        box-shadow:none;
        @extend %cursor-pointer;
        position: relative;
        width:100%;
        z-index: 3;
        text-indent: 1px;
        text-overflow: '';
    }

    &:after {
        /*@include position(absolute, em($input-padding-top) em($input-padding-side) 0 0);*/
        @include position(absolute, 0em 0em 0em 0);
        @extend %display-block;
        line-height: $input-height;
        padding-right: $input-padding-side;
    }


}

/*

Custom icons in inputs

Markup:
<div class="form__controls">
  <span class="form__icon fontawesome">&#xf02b;</span>
  <input type="text">
</div>
<div class="form__controls">
  <span class="form__icon fontawesome pull-right">&#xf040;</span>
  <input type="text">
</div>

Styleguide 8.4

*/

.form__icon {
    @include position(absolute, em($input-padding-top) 0 0 em($input-padding-side));

    + input {
      padding-left: em(30px);
    }

    &.pull-right {
      left: auto;
      right: em($input-padding-side);

      + input {
        padding-left: em($input-padding-side);
        padding-right: em(30px);
      }
    }

}


/*

Help

Add an help text block

Markup:
<div class="form__controls">
  <input type="text">
  <span class="{$modifiers}">This is an example help text</span>
</div>

.form__help--block - Block Help
.form__help--inline - Help Inline

Styleguide 8.5

*/

.form__help--block,
.form__help--inline {
    color: lighten($text-color, 15%);
}
.form__help--block {
    @extend %display-block;
    padding: rhythm(.5) 0 0;
}
.form__help--inline {
    @extend %display-inline-block;
    vertical-align: middle;
    padding-left: 5px;
}



/*

Suggest

Add a simple dropdown open on :focus with a list of link, clicking on a link
will populate de input value.

Script required: **rapido.js**.

Markup:
<div class="form__controls">
  <input type="text">
  <div class="form__suggest">
    <ul>
        <li><a href="#" title="First line">First line</a></li>
        <li><a href="#" title="Second line">Second line</a></li>
        <li><a href="#" title="Third line">Third line</a></li>
    </ul>
  </div>
</div>
<script type="text/javascript">
  $(document).ready(function() {
    $.rapido_Suggest();
  });
</script>

Include this js after including rapido.js.

    $.rapido_Suggest();

**Options** (with default values):

    containerClass:   .form__controls
    suggestClass:     .form__suggest
    suggestAttr:      title

Styleguide 8.6

*/

.form__suggest {
  @extend %form__suggest !optional;
  @include e(transition);
  max-height: 0;
  overflow: hidden;
  position: absolute;
  z-index: 999;

  &.open {
    max-height: $dropdowns-height;
  }

  a {
    @extend %display-block;
  }

  > * {
    padding: $input-padding;
    @extend %display-block;
  }

  > * + * {
    padding-top: 0;
  }

  ul {
    @extend %no-margin;
    list-style: none;
  }
}

/*

Append & Prepend

Markup:
<div class="form__controls form__controls--multi">
  <span class="form__addon fontawesome">&#xf06c;</span>
  <span class="form__addon">$</span>
  <input type="text">
  <div class="form__suggest">
    <ul>
        <li><a href="#">Fist line</a></li>
        <li><a href="#">Second line</a></li>
        <li><a href="#">Third line</a></li>
    </ul>
  </div>
  <span class="form__addon">.00</span>
</div>
<div class="form__controls form__controls--multi">
  <span class="form__addon"><input type="checkbox" value=""></span>
  <input type="text">
  <button type="submit" class="btn btn--default form__addon">Search</button>
</div>

Styleguide 8.8

*/

.form__addon {
    @extend %display-inline-block;
    width: auto;
    min-width: em(16px);
    padding: $input-padding;
    line-height: 1em;
    @extend %font-weight-normal;
    @extend %float-left;
    height: $input-height;
    @extend %text-align-center;
    border-width: $input-border;
    border-style: solid;
    @extend %input-addon !optional; // Backward compatibility
    @extend %form__addon !optional;
}

.form__controls--multi {
    margin-left: $input-border;

    > [type],
    > [class] {
        @include border-radius(0);
        @extend %float-left;
        margin-left: -$input-border;

        &:first-child   { @include border-radius($base-border-radius 0 0 $base-border-radius); }
        &:last-child   { @include border-radius(0 $base-border-radius $base-border-radius 0); }
    }

    > ul.btn-group + * {
        margin-left: -($input-border * 2);
    }

    > [type] {
        position: relative;
        z-index: 2;
    }

}


/*

Form Actions

End a form with a group of actions (buttons). When placed within a `.form__actions`, the buttons will automatically indent to line up with the form controls.

Markup:
<div class="form__actions">
  <button type="submit" class="btn btn--default ">Save changes</button>
  <button type="submit" class="btn btn--default btn--primary pull-right">Save changes</button>
  <button type="button" class="btn btn--default btn--secondary">Cancel</button>
</div>

Styleguide 8.9

*/

.form__actions {
    padding-top: rhythm(1);
    margin-top: rhythm(1);
    margin-bottom: rhythm(1);
    border-top: 1px solid #e5e5e5;
    clear: both;
    @extend %clearfix;
}

.form__group.form__actions {
    @extend %no-border;
    clear: none;
    margin-bottom: 0;
    margin-top: 0;
    padding-top: (rhythm() + em($label-margin-bottom));
 }


/*

Form Layouts

Markup:
<form class="{$modifiers}">
  <div class="form__group">
    <label class="form__label">Label</label>
    <div class="form__controls">
      <input type="text" placeholder="Type something…">
    </div>
  </div>
  <div class="form__group">
    <label class="form__label">Label</label>
    <div class="form__controls">
      <label class="form__radio inline">
        <input type="radio" value="option1" checked> Option one
      </label>
      <label class="form__radio inline">
        <input type="radio" value="option1" checked> Option two
      </label>
    </div>
  </div>
  <div class="form__group">
    <label class="form__label">Label</label>
    <div class="form__controls">
      <span class="form__select">
        <select>
          <option selected="selected">Select Country</option>
          <option>United States</option>
          <option>United Kingdom</option>
          <option>Italy</option>
          <option>France</option>
          <option>Germany</option>
        </select>
      </span>
    </div>
  </div>
  <div class="form__actions">
    <button type="submit" class="btn btn--default ">Save changes</button>
  </div>
</form>

.form--grid - Grid aligned `.form__group` with support for responsive layout with `columns` mixin. Example of a responsive grid with 3 columns on desktop, 2 on tablets, and 1 on smartphones: **[Example code](https://gist.github.com/raffone/6091448)**
.form--aligned - Right align labels and float them to the left to make them appear on the same line as controls.
.form--inline - For left-aligned labels and inline-block controls for a compact layout. This layout doesn't support `.form__group`, `.form__addon`, `.form__actions`

Styleguide 8.10

*/

// Form Grid

@if $forms-grid {
    .form--grid {
        .form__group {
            min-height: $control-min-height;
            margin-top: 0;
            margin-bottom: em($control-margin-bottom);
        }

        .form__multi,
        .form__controls,
        .input-text,
        .form__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"] {
          width: 100%;
        }

    }
}

// Form Aligned

@if $forms-aligned {

    .form--aligned {

        .form__label {
            @extend %float-left;
            width: em($horizontal-offset) - em(20px);
            padding-top: em($input-padding-top);
            @extend %text-align-right;
        }

        .form__controls { margin-left: em(20px); }

        .form__help--block { margin-bottom: 0; }

        .form__controls > .form__radio:first-child,
        .form__controls > .form__checkbox:first-child {
            margin-top: em($input-padding-top);
        }

        .form__controls > .form__radio.inline,
        .form__controls > .form__checkbox.inline{
            margin-top: em($input-padding-top);
        }

        .form__actions {
            padding-left: em($horizontal-offset);
        }

        @include breakpoint($palm) {
            .form__label {
                width: 100%;
                float: none;
                padding-top: 0;
                text-align: left;
            }

            .form__controls { margin-left: 0; }
            .form__actions { padding-left: 0; }
        }
    }
}


/*

Inline Form (semplified)

The inline layout can also be used width a samplified markup.

Markup:
<form class="form--inline">
  <label class="form__label">Label</label>
    <input type="text" placeholder="Type something…">
    <label class="form__radio inline">
      <input type="radio" value="option1" checked> Option one
    </label>
    <label class="form__radio inline">
      <input type="radio" value="option1" checked> Option two
    </label>
    <span class="form__select">
      <select>
        <option selected="selected">Select Country</option>
        <option>United States</option>
        <option>United Kingdom</option>
        <option>Italy</option>
        <option>France</option>
        <option>Germany</option>
      </select>
    </span>
  <button type="submit" class="btn btn--default ">Save changes</button>
</form>

</form>

Styleguide 8.10.1

*/

// Form Inline

@if $forms-inline {

    .form--inline {

        > * {
          margin: 0 0 0 rhythm();
        }

        .form__label {
          @extend %display-inline-block;
          padding-right: 1em;
          margin-bottom: 0;
        }

        .input-text,
        .form__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"] {
          width: auto;
        }

        .form__select {
          padding-right: 2.5em;
        }

        .form__group {
            @extend %no-padding;
            @extend %display-inline-block;
        }

        .form__group + .form__group {
          margin-top: 0;
        }

        .form__actions {
            @extend %no-border;
            @extend %no-padding;
            @extend %no-margin;
            @extend %display-inline-block;
        }

    }
}

}