$form-spacing: 1.4em;
$form-border-color: $base-border-color;
$form-border-color-hover: $blue;
$form-border-color-focus: $blue;
$form-border-radius: 0px;

fieldset {
  padding: 0 10px;
  background-color: $light-gray;
  border: 1px solid $medium-gray;
  border-radius: 0px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
  max-width: 500px;
}

input, label, select { display: block; }

div.form-group {
  margin: 1em 0;
}

p.form-hint {
  font-size: $small-font-size;
  color: $dark-gray;
  margin: 0;
}

p.form-static {
  margin: 0.7em;
}

label {
  font-weight: bold;
  margin-bottom: $form-spacing / 4;
  width: 100%;

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

  abbr {
    display: none;
  }
}

textarea,
#{$all-text-inputs},
select[multiple=multiple] {
  @include transition(border-color);
  box-sizing: border-box;
  background-color: white;
  border-radius: $form-border-radius;
  border: 1px solid $form-border-color;
  margin-bottom: $form-spacing / 2;
  padding: ($form-spacing / 3) ($form-spacing / 3);
  width: 100%;

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

textarea { resize: vertical; }

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

input[type="checkbox"],
input[type="radio"] {
  display: inline;
  margin: $form-spacing * 0.5;
}

input[type="file"] {
  padding-bottom: $form-spacing / 2;
  width: 100%;
}

select {
  display: inline;
  margin: $form-spacing / 8;
}

div.form-button-group {
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;

  input[type="submit"], button, .button {
    width: 100%;
  }
}