//
// Forms.css
// Adapted from Bootstrap's forms.less (https://github.com/twbs/bootstrap/blob/master/less/forms.less)
// --------------------------------------------------

label {
  display: inline-block;
  font-size: $font-size-default;
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

input[type="search"] {
  box-sizing: border-box;
}

input[type="radio"],
input[type="checkbox"] {
  margin: 4px 0 0;
  line-height: normal;
}

.form-control {
  display: inline-block;
  width: 100%;
  min-height: 25px;
  padding: $padding-less $padding;
  font-size: $font-size-default;
  line-height: $line-height-default;
  background-color: $chrome-color;
  border: 1px solid $border-color;
  border-radius: $default-border-radius;
  outline: none;

  &:focus {
    border-color: $focus-input-color;
    box-shadow: 3px 3px 0 $focus-input-color,
                -3px -3px 0 $focus-input-color,
                -3px 3px 0 $focus-input-color,
                3px -3px 0 $focus-input-color;
  }
}

// Reset height for `textarea`s
textarea {
  height: auto;
}

// Form groups
//
// Designed to help with the organization and spacing of vertical forms. For
// horizontal forms, use the predefined grid classes.

.form-group {
  margin-bottom: 10px;
}

// Checkboxes and radios
//
// Indent the labels to position radios/checkboxes as hanging controls.

.radio,
.checkbox {
  position: relative;
  display: block;
  margin-top: 10px;
  margin-bottom: 10px;

  label {
    padding-left: 20px;
    margin-bottom: 0;
    font-weight: normal;
  }
}

.radio input[type="radio"],
.radio-inline input[type="radio"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
  position: absolute;
  margin-left: -20px;
  margin-top: 4px;
}

// Form actions
.form-actions .btn {
  margin-right: 10px;

  &:last-child {
    margin-right: 0;
  }
}