//
// Forms
// --------------------------------------------------


// GENERAL STYLES
// --------------

// Make all forms have space below them
form {
  margin: 0 0 1.43em;
}

// Identify controls by their labels
label {
  display: block;
  font-weight: normal;
  line-height: 1.43em;
  margin-bottom: 5px;
}

// Set font for forms
button,
input,
optgroup,
select,
.select,
textarea {
  font-family: inherit;
  font-size: var(--main-font-size, 14px);
  line-height: 1.43em;
  margin: 0;
  text-transform: none;
}

// Form controls
// -------------------------

// Shared size and type resets
select,
.select,
textarea,
input {
  display: inline-block;
  padding: 4px 6px;
  color: var(--input-clr, #555);
  border-radius: var(--input-border-radius, 3px);
}

textarea,
input {
  background-color: var(--input-bg-clr, #fff);
  border: 1px solid var(--input-border-clr, #ccc);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  transition: border linear .2s, box-shadow linear .2s;
  width: 210px;

  // Focus state
  &:focus {
    border-color: var(--input-focus-border-clr, #999);
    box-shadow: none;
  }
}


// Position radios and checkboxes better
input[type="radio"],
input[type="checkbox"] {
  margin: 4px 0 0;
  line-height: normal;
  cursor: pointer;
}

// Reset width of input images, buttons, radios, checkboxes
input[type="file"],
input[type="radio"],
input[type="checkbox"] {
  width: auto; // Override of generic input selector
}

// Make select elements obey height by applying a border
select, .select {
  // Safari requires -webkit-
  -webkit-appearance: none;
  appearance: none;
  background: var(--input-bg-clr, #fff) url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' height='10px' width='15px'><text x='0' y='10' fill='rgb(85,85,85)'>▾</text></svg>") right center/1em no-repeat border-box;
  border: 1px solid var(--input-border-clr, #ccc);
  cursor: pointer;
  padding-right: 1.5em;
  width: 223px; // default input width + 10px of padding that doesn't get applied
}

// Focus for select, file, radio, and checkbox
select:focus,
.select:focus,
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
  .tab-focus();
}


// INPUT SIZES
// -----------

// General classes for quick sizes
.input-xlarge     { width: 270px; }
.input-xxlarge    { width: 530px; }

// Grid style input sizes
input[class*="span"],
select[class*="span"],
textarea[class*="span"] {
  margin-left: 0;
}



// DISABLED STATE
// --------------

// Disabled and read-only inputs
input[disabled],
select[disabled],
textarea[disabled],
input[readonly],
select[readonly],
textarea[readonly] {
  cursor: not-allowed;
  opacity: 0.7;
}





// FORM FIELD FEEDBACK STATES
// --------------------------

// Error
.control-group.error {
  > label {
    color: var(--error-clr, #b94a48);
  }
  // Style inputs accordingly
  input,
  select,
  textarea {
    color: var(--error-clr, #b94a48);
    border-color: var(--error-border-clr, #eed3d7);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075); // Redeclare so transitions work
    &:focus {
      border-color: var(--error-clr, #b94a48);
      // Write out in full since the lighten() function isn't easily escaped
      box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px var(--error-border-clr, #eed3d7);
    }
  }
}

// HORIZONTAL FORMS
// ---------------------------

// Common properties
// -----------------

.form-horizontal {
  input,
  textarea,
  select {
    display: inline-block;
    margin-bottom: 0;
    vertical-align: middle;
  }
}


// Margin to space out fieldsets
.control-group {
  margin-bottom: 0.715em;
}

// Horizontal-specific styles
// --------------------------

.form-horizontal {
  // Increase spacing between groups
  .control-group {
    margin-bottom: 1.43em;

    > label {
      display: inline-block;
      padding-top: 5px;
      text-align: right;
      width: 140px;
    }

    // Move over all input controls and content
    > *:not(label) {
      display: inline-block;
      margin-left: 20px;
      vertical-align: top;
    }
  }
}