//
// Form Variables
//

// We use this to set the base for lots of form spacing and positioning styles
$form-spacing:                       emCalc(16px) !default;

// We use these to style the labels in different ways
$label-pointer:                      pointer !default;
$label-font-size:                    emCalc(14px) !default;
$label-font-weight:                  500 !default;
$label-font-color:                   lighten(#000, 30%) !default;
$label-bottom-margin:                emCalc(3px) !default;
$input-font-family:                  inherit !default;
$input-font-color:                   rgba(0,0,0,0.75) !default;
$input-font-size:                    emCalc(14px) !default;
$input-bg-color:                     #fff !default;
$input-focus-bg-color:               darken(#fff, 2%) !default;
$input-border-color:                 darken(#fff, 20%) !default;
$input-focus-border-color:           darken(#fff, 40%) !default;
$input-border-style:                 solid !default;
$input-border-width:                 1px !default;
$input-disabled-bg:                  #ddd !default;
$input-box-shadow:                   inset 0 1px 2px rgba(0,0,0,0.1) !default;

// We use these to style the fieldset border and spacing.
$fieldset-border-style:              solid !default;
$fieldset-border-width:              1px !default;
$fieldset-border-color:              #ddd !default;
$fieldset-padding:                   emCalc(20px) !default;
$fieldset-margin:                    emCalc(18px) 0 !default;

// We use these to style the legends when you use them
$legend-bg:                          #fff !default;
$legend-font-weight:                 bold !default;
$legend-padding:                     0 emCalc(3px) !default;

// We use these to style the prefix and postfix input elements
$input-prefix-bg:                    darken(#fff, 5%) !default;
$input-prefix-border-color:          darken(#fff, 20%) !default;
$input-prefix-border-size:           1px !default;
$input-prefix-border-type:           solid !default;
$input-prefix-overflow:              hidden !default;
$input-prefix-font-color:            #333 !default;
$input-prefix-font-color-alt:        #fff !default;

// We use these to style the error states for inputs and labels
$input-error-message-padding:        emCalc(6px) emCalc(4px) !default;
$input-error-message-top:            -($form-spacing) - emCalc(5px) !default;
$input-error-message-font-size:      emCalc(12px) !default;
$input-error-message-font-weight:    bold !default;
$input-error-message-font-color:     #fff !default;
$input-error-message-font-color-alt: #333 !default;


//
// Form Mixins
//

// We use this mixin to give us form styles for rows inside of forms
@mixin form-row-base {
  .row { margin: 0 -$form-spacing / 2;

    .column,
    .columns { padding: 0 $form-spacing / 2; }

    // Use this to collapse the margins of a form row
    &.collapse { margin: 0;

      .column,
      .columns { padding: 0; }

    }
  }
  input.column,
  input.columns { padding-#{$default-float}: $form-spacing / 2; }
}

// We use this mixin to give all basic form elements their style
@mixin form-element() {
  background-color: $input-bg-color;
  font-family: $input-font-family;
  border: $input-border-width $input-border-style $input-border-color;
  -webkit-box-shadow: $input-box-shadow;
  box-shadow: $input-box-shadow;
  color: $input-font-color;
  display: block;
  font-size: $input-font-size;
  margin: 0 0 $form-spacing 0;
  padding: $form-spacing / 2;
  height: emCalc(13px) + ($form-spacing * 1.5);
  width: 100%;
  @include box-sizing(border-box);

  // Basic focus styles
  &:focus {
    background: $input-focus-bg-color;
    border-color: $input-focus-border-color;
    outline: none;
  }

  // Disabled background input background color
  &[disabled] { background-color: $input-disabled-bg; }
}

// We use this mixin to create form labels
@mixin form-label($alignment:false, $base-style:true) {

  // Control whether or not the base styles come through.
  @if $base-style {
    font-size: $label-font-size;
    color: $label-font-color;
    cursor: $label-pointer;
    display: block;
    font-weight: $label-font-weight;
    margin-bottom: $label-bottom-margin;
  }

  // Alignment options
  @if $alignment == right {
    float: none;
    text-align: right;
  }
  @else if $alignment == inline {
    margin: 0 0 $form-spacing 0;
    padding: $form-spacing / 2 + emCalc($input-border-width * 2) 0;
  }
}

// We use this mixin to create postfix/prefix form Labels
@mixin prefix-postfix-base {
  display: block;
  position: relative;
  z-index: 2;
  text-align: center;
  width: 100%;
  padding-top: 0;
  padding-bottom: 0;
  border-style: $input-prefix-border-type;
  border-width: $input-prefix-border-size;
  overflow: $input-prefix-overflow;
  font-size: $label-font-size;
  height: ($label-font-size + ($form-spacing * 1.5) - emCalc(1px));
  line-height: ($label-font-size + ($form-spacing * 1.5) - emCalc(1px));
}

// We use this mixin to create prefix label styles
@mixin prefix($bg:$input-prefix-bg,$is-button:false) {

  @if $bg {
    $bg-lightness: lightness($bg);
    background: $bg;
    border-color: darken($bg, 10%);
    border-#{$opposite-direction}: none;

    // Control the font color based on background brightness
    @if $bg-lightness > 70% or $bg == yellow { color: $input-prefix-font-color; }
    @else { color: $input-prefix-font-color-alt; }
  }

  @if $is-button {
    padding-#{$default-float}: 0;
    padding-#{$opposite-direction}: 0;
    padding-top: 0;
    padding-bottom: 0;
    text-align: center;
    line-height: emCalc(34px);
  }

}

// We use this mixin to create postfix label styles
@mixin postfix($bg:$input-prefix-bg, $is-button:false) {

  @if $bg {
    $bg-lightness: lightness($bg);
    background: $bg;
    border-color: darken($bg, 15%);
    border-#{$default-float}: none;

    // Control the font color based on background brightness
    @if $bg-lightness > 70%  or $bg == yellow { color: $input-prefix-font-color; }
    @else { color: $input-prefix-font-color-alt; }
  }

  @if $is-button {
    padding-#{$default-float}: 0;
    padding-#{$opposite-direction}: 0;
    padding-top: 0;
    padding-bottom: 0;
    text-align: center;
    line-height: emCalc(34px);
  }

}

// We use this mixin to style fieldsets
@mixin fieldset {
  border: $fieldset-border-style $fieldset-border-width $fieldset-border-color;
  padding: $fieldset-padding;
  margin: $fieldset-margin;

  // and legend styles
  legend {
    font-weight: $legend-font-weight;
    background: $legend-bg;
    padding: $legend-padding;
    margin: 0;
    margin-#{$default-float}: emCalc(-3px);
  }
}

// We use this mixin to control border and background color of error inputs
@mixin form-error-color($color:$alert-color) {
  border-color: $color;
  background-color: rgba($color, 0.1);

  // Go back to normal on focus
  &:focus {
    background: $input-focus-bg-color;
    border-color: $input-focus-border-color;
  }
}

// We use this simple mixin to style labels for error inputs
@mixin form-label-error-color($color:$alert-color) { color: $color; }

// We use this mixin to create error message styles
@mixin form-error-message($bg:$alert-color) {
  display: block;
  padding: $input-error-message-padding;
  margin-top: $input-error-message-top;
  margin-bottom: $form-spacing;
  font-size: $input-error-message-font-size;
  font-weight: $input-error-message-font-weight;

  // We can control the text color based on the brightness of the background.
  $bg-lightness: lightness($bg);
  background: $bg;
  @if $bg-lightness < 70% or $bg == yellow { color: $input-error-message-font-color; }
  @else { color: $input-error-message-font-color-alt; }
}

// Only include these classes if the variable is true, otherwise they'll be left out.
@if $include-html-form-classes {
	/* Standard Forms */
  form { margin: 0 0 $form-spacing; }

  /* Using forms within rows, we need to set some defaults */
  form .row { @include form-row-base; }

  /* Label Styles */
  label { @include form-label;
    &.right { @include form-label(right,false); }
    &.inline { @include form-label(inline,false); }
  }

  /* Attach elements to the beginning or end of an input */
  .prefix,
  .postfix { @include prefix-postfix-base; }

  /* Adjust padding, alignment and radius if pre/post element is a button */
  .postfix.button { @include button-size(false,false,false); @include postfix(false,true); }
  .prefix.button { @include button-size(false,false,false); @include prefix(false,true); }
  .prefix.button.radius { @include side-radius($default-float, $global-radius); }
  .postfix.button.radius { @include side-radius($opposite-direction, $global-radius); }
  .prefix.button.round { @include side-radius($default-float, 1000px); }
  .postfix.button.round { @include side-radius($opposite-direction, 1000px); }

  /* Separate prefix and postfix styles when on span so buttons keep their own */
  span.prefix { @include prefix();
    &.radius { @include side-radius($default-float, $global-radius); }
  }
  span.postfix { @include postfix();
    &.radius { @include side-radius($opposite-direction, $global-radius); }
  }

  /* Input groups will automatically style first and last elements of the group */
  .input-group {
    &.radius {
      &>*:first-child,  &>*:first-child * {
        @include side-radius($default-float, $global-radius);
      }
      &>*:last-child, &>*:last-child * {
        @include side-radius($opposite-direction, $global-radius);
      }
    }
    &.round {
      &>*:first-child,  &>*:first-child * {
        @include side-radius($default-float, $button-round);
      }
      &>*:last-child, &>*:last-child * {
        @include side-radius($opposite-direction, $button-round);
      }
    }
  }

  /* We use this to get basic styling on all basic form elements */
  input[type="text"],
  input[type="password"],
  input[type="date"],
  input[type="datetime"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="week"],
  input[type="email"],
  input[type="number"],
  input[type="search"],
  input[type="tel"],
  input[type="time"],
  input[type="url"],
  textarea {
    @include form-element;
    @include single-transition(all, 0.15s, linear);
  }

  /* We add basic fieldset styling */
  fieldset {
    @include fieldset;
  }

  /* Error Handling */
  .error input,
  input.error,
  .error textarea,
  textarea.error {
    @include form-error-color;
  }

  .error label,
  label.error { @include form-label-error-color; }

  .error small,
  small.error {
    @include form-error-message;
  }
}