///////////////////////////////////////////////////////////////////////////////
//
//  Base Form Styles
//
///////////////////////////////////////////////////////////////////////////////

$form-border-color: darken($base-border-color, 5%);
$form-border-color-hover: darken($base-border-color, 10%);
$form-border-color-focus: $blue; //blue default
$form-border-radius: 2px;
$form-box-shadow: inset 0 1px 3px hsla(0, 0%, 0%, 0.06);
$form-box-shadow-focus: $form-box-shadow, 0 0 5px rgba(darken($form-border-color-focus, 5%), 0.7);
$form-font-size: $base-font-size;
$form-font-family: $sans-serif;
$form-width: 300px;

fieldset {
  background: #f1f1f1;
  border: 1px solid lighten($base-border-color, 20%);
  margin: 0 0 $base-line-height 0;
  padding: $base-line-height $base-line-height ($base-line-height * .75) $base-line-height;
}

input,
label,
select {
  display: block;
  font-family: $form-font-family;
  font-size: $form-font-size;
}

label {
  color: $base-font-color;
  font-weight: bold;
  margin-bottom: $base-line-height * .25;
  font-size: $base-font-size-small-1;

  &.required::after {
    content: "*";
  }

  abbr {
    display: none;
  }
}

textarea,
#{$all-text-inputs} {
  background-color: white;
  border: 1px solid $form-border-color;
  border-radius: $form-border-radius;
  box-shadow: $form-box-shadow;
  @include box-sizing(border-box);
  font-family: $form-font-family;
  font-size: $form-font-size;
  margin-bottom: $base-line-height * .5;
  padding: ($base-line-height * .5) ($base-line-height * .5);
  @include transition(border-color);
  width: $form-width;

  &:hover {
    border-color: $form-border-color-hover;
  }

  &:focus {
    border-color: $form-border-color-focus;
    box-shadow: $form-box-shadow-focus;
    outline: none;
  }
}

input[type="search"] {
  @include appearance(none);
}

input[type="color"] {
  background-color: transparent;
  border: 0;
  box-shadow: none;
  height: $base-line-height * 3;
  padding: 0;
  position: relative;
  width: $base-line-height * 5;
}

input[type="checkbox"], input[type="radio"] {
  display: inline;
  margin-right: $base-line-height * .5;
}

select {
  width: $form-width;
  margin-bottom: $base-line-height * 1.5;
}

a.button,
button:not(.reset),
input[type="submit"]:not(.reset) {

  // Button Overrides
  color: white;
  border: 0;
  border-radius: 3px;
  font-size: $form-font-size;
  background: $search-button-bg;
  padding: 0.7em 1.9em;
  text-decoration: none;

  &:hover {
    color: #fff;
    background: darken($search-button-bg, 5%);
  }
}

button[disabled] {
  cursor: not-allowed;
}

input {
  @include placeholder {
    color: #AEB6C2;
    font-weight: 300;
  }
}

form {
  .input {
    .hint {
      font-size: $base-font-size-small-2;
      margin-top: -10px;
      display: block;
    }
  }

  input + .hint {
    margin-bottom: 5px;
  }
}
