//
// Base styles
//

.input-group {
  position: relative;

  @if $enable-flex {
    display: flex;
  } @else {
    display: table;
    // Prevent input groups from inheriting border styles from table cells when
    // placed within a table.
    border-collapse: separate;
  }

  .form-control {
    // Ensure that the input is always above the *appended* addon button for
    // proper border colors.
    position: relative;
    overflow: hidden;
    //z-index: 2;
    @if $enable-flex {
      flex: 1;
    } @else {
      // IE9 fubars the placeholder attribute in text inputs and the arrows on
      // select elements in input groups. To fix it, we float the input. Details:
      // https://github.com/twbs/bootstrap/issues/11561#issuecomment-28936855
      float: left;
      width: 100%;
    }
    margin-bottom: 0;
  }
}

.input-group__addon,
.input-group__button,
.input-group .form-control {
  @if $enable-flex {
    // do nothing
  } @else {
    display: table-cell;
  }

  &:not(:first-child):not(:last-child) {
    @include border-radius(0);
  }
}

.input-group__addon,
.input-group__button {
  @if $enable-flex {
    // do nothing
  } @else {
    width: 1%;
  }
  white-space: nowrap;
  vertical-align: middle; // Match the inputs
}


// Sizing options
//
// Remix the default form control sizing classes into new ones for easier
// manipulation.

.input-group--lg > .form-control,
.input-group--lg > .input-group__addon,
.input-group--lg > .input-group__button > .button {
  @extend .form-control--lg;
}
.input-group--sm > .form-control,
.input-group--sm > .input-group__addon,
.input-group--sm > .input-group__button > .button {
  @extend .form-control--sm;
}


//
// Text input groups
//

.input-group__addon {
  padding: $input-padding-y $input-padding-x;
  font-size: $font-size-base;
  font-weight: normal;
  line-height: inherit;
  color: $input-color;
  text-align: center;
  background-color: $input-group-addon-bg;
  border: 1px solid $input-group-addon-border-color;
  @include border-radius($border-radius);

  // Sizing
  &.form-control--sm {
    padding: $input-padding-y-sm $input-padding-x-sm;
    font-size: $font-size-sm;
    @include border-radius($border-radius-sm);
  }
  &.form-control--lg {
    padding: $input-padding-x-lg $input-padding-x-lg;
    font-size: $font-size-lg;
    @include border-radius($border-radius-lg);
  }

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


//
// Reset rounded corners
//

.input-group .form-control:first-child,
.input-group__addon:first-child,
.input-group__button:first-child > .button,
.input-group__button:first-child > .button-group > .button,
.input-group__button:first-child > .dropdown-toggle,
.input-group__button:last-child > .button:not(:last-child):not(.dropdown-toggle),
.input-group__button:last-child > .button-group:not(:last-child) > .button {
  @include border-right-radius(0);
}
.input-group__addon:first-child {
  border-right: 0;
}
.input-group .form-control:last-child,
.input-group__addon:last-child,
.input-group__button:last-child > .button,
.input-group__button:last-child > .button-group > .button,
.input-group__button:last-child > .dropdown-toggle,
.input-group__button:first-child > .button:not(:first-child),
.input-group__button:first-child > .button-group:not(:first-child) > .button {
  @include border-left-radius(0);
}
.input-group__addon:last-child {
  border-left: 0;
}


//
// Button input groups
//

.input-group__button {
  position: relative;
  // Jankily prevent input button groups from wrapping with `white-space` and
  // `font-size` in combination with `inline-block` on buttons.
  font-size: 0;
  white-space: nowrap;
  // fix safari from being 1px too tall
  height: $input-height;
  overflow: hidden;

  // Negative margin for spacing, position for bringing hovered/focused/actived
  // element above the siblings.
  > .button {
    position: relative;
    + .button {
      margin-left: -1px;
    }
    // Bring the "active" button to the front
    @include hover-focus-active {
      z-index: 2;
    }
  }

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