//
// Input groups
// --------------------------------------------------

// Base styles
// -------------------------
.input-group {
  position: relative;
  display: table;
  border-collapse: separate;
  > * {
    margin-bottom: 0;
    margin-top: 0;
  }

  &[class*="col-"] {
    float: none;
    padding-left: 0;
    padding-right: 0;
  }

  .form-control {
    position: relative;
    z-index: 2;
    float: left;
    width: 100%;
  }
  .dropdown-toggle {
    padding-right: @space-md;
    padding-left: @space-md;
  }
}

// Sizing options

.input-group-lg > .form-control,
.input-group-lg > .input-group-addon,
.input-group-lg > .input-group-btn > .btn {
  .input-lg();
}
.input-group-sm > .form-control,
.input-group-sm > .input-group-addon,
.input-group-sm > .input-group-btn > .btn {
  .input-sm();
}


// Display as table-cell
// -------------------------
.input-group-addon,
.input-group-btn,
.input-group .form-control {
  display: table-cell;
}
// Addon and addon wrapper for buttons
.input-group-addon,
.input-group-btn {
  width: 1%;
  white-space: nowrap;
  vertical-align: middle; // Match the inputs
}

// Text input groups
// -------------------------
.input-group-addon {
  padding-left: @padding-large-horizontal;
  padding-right: @padding-large-horizontal;
  font-size: @font-size-base;
  font-weight: normal;
  line-height: 1;
  color: @input-color;
  text-align: center;
  background-color: @input-group-addon-bg;
  border: 1px solid darken(@input-group-addon-bg, 5%);
  outline: 0;
  box-shadow: inset 0 1px 1px fadeout(@input-group-addon-bg, 50%), 0 0 1px fadeout(@input-group-addon-bg, 50%);

  // Sizing
  &.input-sm {
    padding: @padding-small-vertical @padding-small-horizontal;
    font-size: @font-size-small;
  }
  &.input-lg {
    padding: @padding-large-vertical @padding-large-horizontal;
    font-size: @font-size-large;
  }

  &:focus {
    border: 1px solid darken(@input-group-addon-bg, 7%);
    outline: 0;
    box-shadow: inset 0 1px 1px @input-group-addon-bg, 30%, 0 0 1px fadeout(@input-group-addon-bg, 10%);
  }

  // Nuke default margins from checkboxes and radios to vertically center within.
  input[type="radio"],
  input[type="checkbox"] {
    margin-top: 0;
  }
}

// Button input groups
// -------------------------
.input-group-btn {
  position: relative;
  font-size: 0;
  white-space: nowrap;

  // Negative margin for spacing, position for bringing hovered/focused/actived
  // element above the siblings.
  > .btn {
    position: relative;
    margin-bottom: 0;
    margin-top: 0;
    font-size: @font-size-base;
    padding: .55rem @space-xl;
    + .btn {
      margin-left: -1px;
    }
    // Bring the "active" button to the front
    &:hover,
    &:focus,
    &:active {
      z-index: 2;
    }
  }

  // Negative margin to only have a 1px border between the two
  &:first-child {
    > .btn,
    > .btn-group {
      margin-right: -1px;
    }
  }
  &:last-child {
    > .btn,
    > .btn-group {
      z-index: 2;
      margin-left: -1px;
    }
  }
}
