/* Requires
   globals.css */

/* Standard Forms ---------------------- */

  form { margin: 0 0 ($formSpacing * $ratio); }

  .row form .row { margin: 0 (-($formSpacing / 2));

    .column, .columns { padding: 0 ($formSpacing / 2); }

    &.collapse { margin: 0;
      .column, .columns { padding: 0; }
    }
  }

  label { font-size: ms(0); color: $labelFontColor; cursor: pointer; display: block; font-weight: $labelFontWeight; margin-bottom: $labelBtmMargin;

    &.right { float: none; text-align: right; }
    &.inline { line-height: (ms(0) + ($formSpacing * 1.5)); margin: 0 0 $formSpacing 0; }
  }

  input[type=button].inline-button,input[type=submit].inline-button,a.button.inline-button {
    height: (ms(0) + ($formSpacing * 1.5)); line-height: (ms(0) + ($formSpacing * 1.5)) - 1;padding-top:0px;padding-bottom:0px;
    font-size: $inputFontSize;
  }
  .prefix, .postfix { display: block; position: relative; z-index: 2; text-align: center; width: 100%; padding-top: 0; padding-bottom: 0; height: (ms(0) + ($formSpacing * 1.5)); line-height: (ms(0) + ($formSpacing * 1.5)) - 1; }
  a.button.prefix, a.button.postfix { padding-#{$defaultFloat}: 0; padding-#{$defaultOpposite}: 0; text-align: center; }
  span.prefix, span.postfix { background: darken($white, 5%); border: 1px solid darken($white, 20%); }

  .prefix { #{$defaultFloat}: 2px; @include border-corner-radius(top, $defaultFloat, $inputBorderRadius); @include border-corner-radius(bottom, $defaultFloat, $inputBorderRadius); overflow:hidden; }
  .postfix { #{$defaultOpposite}: 2px; @include border-corner-radius(top, $defaultOpposite, $inputBorderRadius); @include border-corner-radius(bottom, $defaultOpposite, $inputBorderRadius); }

  input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], textarea, select, div.custom.dropdown { background-color: $inputBgColor; font-family: inherit; border: $inputBorderWidth $inputBorderStyle $inputBorderColor; @include border-radius($inputBorderRadius); @include box-shadow(inset 0 1px 2px rgba(0,0,0,0.1)); color: $inputFontColor; display: block; font-size: $inputFontSize; margin: 0 0 $formSpacing 0; padding: ($formSpacing / 2); height: (ms(0) + ($formSpacing * 1.5)); width: 100%; @include transition(all 0.15s linear);
    &[multiple] { min-height: 2 * (ms(0) + ($formSpacing * 1.5)); }
    &.oversize { font-size: ms(1); padding: (($formSpacing - 4) / 2) ($formSpacing / 2); }

    &:focus { background: $inputFocusBgColor; border-color: $inputFocusBorderColor; }
    &[disabled] { background-color: #ddd; }
  }

  textarea { height: auto; }

  select { width: 100%; line-height: 26px; }

  /* Fieldsets */
  fieldset { border: solid 1px #ddd; @include border-radius($fieldsetBorderRadius); padding: 12px; margin: 18px 0;

    legend { font-weight: bold; background: $white; padding: 0 3px; margin: 0; margin-#{$defaultFloat}: -3px; }
  }

  /* Errors */
  .error input, input.error, .error textarea, textarea.error, .error input:focus, input.error:focus, .error textarea:focus, textarea.error:focus { border-color: $alertColor; background-color: rgba($alertColor, 0.1); }
  .error input:focus, input.error:focus, .error textarea:focus, textarea.error:focus { outline-color: lighten($alertColor, 30%); }
  .error label, label.error { color: $alertColor; }
  .error small, small.error { display: block; padding: 6px 4px; margin-top: -($formSpacing) - 1; margin-bottom: $formSpacing; background: $alertColor; color: #fff; font-size: ms(0) - 2; font-weight: bold; @include border-corner-radius(bottom, $defaultFloat, $inputBorderRadius); @include border-corner-radius(bottom, $defaultOpposite, $inputBorderRadius); }
  /* Custom Forms ---------------------- */

  form.custom {

    span.custom { display: inline-block; width: 16px; height: 16px; position: relative; top: 2px; border: solid 1px $custFormBorderColor; background: $custFormBgColor;

      &.radio { @include border-radius(100px); }
      &.checkbox {
        &:before { content: ""; display: block; line-height: 0.8; height: 14px; width: 14px; text-align: center; position: absolute; top: 0; #{$defaultFloat}: 0; font-size: 14px; color: #fff; }
      }
      &.radio.checked {
        &:before { content: ""; display: block; width: 8px; height: 8px; @include border-radius(100px); background: $custCheckColor; position: relative; top: 3px; #{$defaultFloat}: 3px; }
      }
      &.checkbox.checked {
        &:before { content: "\00d7"; color: $custCheckColor; }
      }
    }
    div.custom.dropdown { display: block; position: relative; height: (ms(0) + ($formSpacing * 1.5)); margin-bottom: $formSpacing; margin-top: 0px;padding:0px;@include background-image(linear-gradient(white, $custDropdownFadeToColor));

    @include box-shadow(none);
      ul { overflow-y: auto; max-height: $custSelectDropHeight;  }
      a.current { cursor:default; white-space: nowrap; height: 100%; line-height: (ms(0) + ($formSpacing * 1.5)) - ($inputBorderWidth * 2);  color: $inputFontColor;text-decoration: none; overflow: hidden;display: block;margin-left:($formSpacing / 2);margin-right:((ms(0) + ($formSpacing * 1.5))/2)+5;}
      a.selector { cursor:default;position: absolute;width: ((ms(0) + ($formSpacing * 1.5))/2)+5; height: (ms(0) + ($formSpacing * 1.5)) - ($inputBorderWidth * 2); display: block; #{$defaultOpposite}: 0; top: 0;
        &:after { content: ""; display: block; @include cssTriangle(5px, $custSelectTriangleColor, top); position: absolute; left: 3px; top: 50%; margin-top: -2px;  }
      }
      &:hover, &.open {
        a.selector { &:after { @include cssTriangle(5px, $custSelectTriangleColorOpen, top); } }
      }

      .disabled {
        color: #888;
        &:hover {
          background: transparent;
          color: #888;
          &:after { display: none; }
        }
      }
      &.open ul { display: block; z-index: 10; min-width:100%;@include box-sizing(content-box); }

      &.small { width: 134px !important; }
      &.medium { width: 254px !important; }
      &.large { width: 434px !important; }
      &.expand { width: 100% !important; }

      &.open.small ul { min-width: 134px !important;@include box-sizing(border-box); }
      &.open.medium ul { min-width: 254px !important;@include box-sizing(border-box); }
      &.open.large ul { min-width: 434px !important;@include box-sizing(border-box); }
    }

    div.custom.dropdown ul { @include box-shadow(rgba(0,0,0,.2) 0 2px 2px 0px); @include border-radius($inputBorderRadius); position: absolute; width: auto; display: none; margin: 0; #{$defaultFloat}: -$inputBorderWidth; top: ((ms(0) + ($formSpacing * 1.5)) - $inputBorderWidth * 2); margin: 0; padding: 0; background: $custDropdownBgColor; background: rgba($custDropdownBgColor,0.95); border: solid 1px $custDropdownBorderColor;

      li { color: $custDropdownFontColor; font-size: ms(0) - 1; cursor: default; padding: 3px; padding-#{$defaultFloat}: 6px; padding-#{$defaultOpposite}: 38px; min-height: 18px; line-height: 18px; margin: 0; white-space: nowrap; list-style: none; }
      li.selected { background: $custDropdownSelectedBgColor; color: $custDropdownSelectedFontColor;
      }
      li:hover { background-color: darken($custDropdownSelectedBgColor,4%); color: $custDropdownSelectedFontColor;
      }
      li.selected:hover { background: $custDropdownSelectedBgColor; cursor: default; color: $custDropdownSelectedFontColor;
      }
      &.show { display: block; }
    }

    /* Custom input, disabled */
    .custom.disabled { background-color: $custFormDisabledBgColor; }
  }

  /* Correct FF custom dropdown height */
  @-moz-document url-prefix() {
    form.custom div.custom.dropdown a.selector { height: 28px; }
  }
  .lt-ie9 form.custom div.custom.dropdown a.selector { height: 28px; }
