@import "settings";

// Base styles
// -------------------------
.input-group {
  position: relative; // For dropdowns
  display: flex;
  max-width: 23rem;

  // Undo padding and float of grid classes
  &[class*="col-"] {
    float: none;
    padding-left: 0;
    padding-right: 0;
  }

  .form-control {
    // Ensure that the input is always above the *appended* addon button for
    // proper border colors.
    position: relative;
    z-index: 2;

    // 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;

    &:focus {
      z-index: 3;

      ~ .input-group-addon {
        outline: 0;
      }

    }
  }
}

// Display as table-cell
// -------------------------
.input-group-addon,
.input-group-btn,
.input-group .form-control {

  &:not(:first-child):not(:last-child) {
    border-radius: 0;
  }
}
// Addon and addon wrapper for buttons
.input-group-addon,
.input-group-btn {
  white-space: nowrap;
  vertical-align: middle; // Match the inputs
}

// Text input groups
// -------------------------
.input-group-addon {
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  padding: $padding-small-vertical $padding-base-horizontal;
  font-size: $font-size-base;
  font-weight: normal;
  line-height: 1;
  text-align: center;
}

.input-group.input-group-expanded {
  .input-group-addon {
    padding: .75rem .5rem .75rem 1.25rem;
    font-size: .875rem;
    line-height: 21px;

    @include for-phone-only {
      padding-right: .125rem;
      padding-left: .125rem;
      font-size: .75rem;
    }

    + .form-control {
      max-width: 240px;
      height: 48px;
    }
  }
}

.input-group-addon:first-child {
  border-right-width: 0;

  [dir='rtl'] & {
    border-right-width: 1px;
    border-left-width: 0;
  }
}

.input-group-addon:last-child {
  border-left-width: 0;

  [dir='rtl'] & {
    border-left-width: 1px;
    border-right-width: 0;
  }
}

// Reset rounded corners
.input-group .form-control:first-child,
.input-group-addon:first-child {
  @include border-right-radius(0);
}

.input-group .form-control:last-child,
.input-group-addon:last-child {
  @include border-left-radius(0);
}

.input-group-expanded {
  max-width: none;
}

.form-disabled {
  .input-group.input-group-expanded,
  .input-group.input-group-expanded + .help-block {
    opacity: .5;
  }
}
