//
// Input Group
//
// .c-input-group {
//   _input-group();
// }
//
// <div class="c-input-group">
//   <div class="c-input-group__addon">@</div>
//   <div class="c-input-group__field">
//     <input type="text">
//   </div>
//   <button class="c-input-group__btn">Go</button>
// </div>
//

_input-group() {
  display: flex;
  flex-wrap: nowrap;
  border-radius: _border-radius;

  > :first-child {
    position: relative;
    border-radius: _border-radius 0 0 _border-radius;
    border-right: none;
  }

  > :nth-last-child(2) {
    position: relative;
    z-index: 1;
  }

  > :last-child {
    position: relative;
    z-index: 0;
    left: -1px;
    border-radius: 0 _border-radius _border-radius 0;

    &:hover, &:active, &:focus {
      z-index: 1;
    }
  }

  &__addon {
    border: 1px solid _form-control-border-color;
    _form-control-base-padding();
    flex: none;
  }

  &__field {
    display: flex;
    flex: 1;

    > input[type='email'],
    > input[type='number'],
    > input[type='password'],
    > input[type='search'],
    > input[type='tel'],
    > input[type='text'],
    > input[type='url'] {
      _form-control();
      border-radius: 0;
      flex: 1;
      width: 100%;
    }
  }

  &__btn {
    _btn({
      background-color: #fff,
    });
    _form-control-base-border();
    _form-control-base-padding();
    color: _color-text;
    flex: none;
    overflow: visible;
  }
}