.#{$ns}InputGroup {
  display: inline-flex;
  flex-wrap: nowrap;

  &.#{$ns}Form-control--sizeXs,
  &.#{$ns}Form-control--sizeSm,
  &.#{$ns}Form-control--sizeMd,
  &.#{$ns}Form-control--sizeLg {
    display: inline-flex;
  }

  &-addOn,
  & .#{$ns}Form-control {
    display: inline-block;
    white-space: nowrap;
  }

  &-addOn {
    background: $InputGroup-addOn-bg;
    border: $InputGroup-addOn-borderWidth solid $InputGroup-addOn-borderColor;
    line-height: $InputGroup-height - $InputGroup-paddingY * 2 -
      $InputGroup-addOn-borderWidth * 2;
    height: $InputGroup-height;
    box-sizing: border-box;
    padding: $InputGroup-paddingY $InputGroup-paddingX;

    &:not(:last-child) {
      border-right: 0;
    }

    &:first-child {
      @if $InputGroup-addOn-borderRadius {
        border-top-left-radius: $InputGroup-addOn-borderRadius;
        border-bottom-left-radius: $InputGroup-addOn-borderRadius;
      }
    }

    &:last-child {
      @if $InputGroup-addOn-borderRadius {
        border-top-right-radius: $InputGroup-addOn-borderRadius;
        border-bottom-right-radius: $InputGroup-addOn-borderRadius;
      }
    }
  }

  &-btn {
    .#{$ns}Button {
      border-radius: 0;
      border: $InputGroup-button-borderWidth solid
        $InputGroup-button-borderColor;
    }

    &:not(:last-child) .#{$ns}Button {
      border-right: 0;
    }

    &:first-child .#{$ns}Button {
      @if $InputGroup-button-borderRadius {
        border-top-left-radius: $InputGroup-button-borderRadius;
        border-bottom-left-radius: $InputGroup-button-borderRadius;
      }
    }

    &:last-child .#{$ns}Button {
      @if $InputGroup-button-borderRadius {
        border-top-right-radius: $InputGroup-button-borderRadius;
        border-bottom-right-radius: $InputGroup-button-borderRadius;
      }
    }
  }

  .#{$ns}TextControl-input {
    flex-basis: 0;
    flex-grow: 1;
    display: inline-flex;

    &:not(:first-child) {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }

    &:not(:last-child) {
      border-right-width: 0;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
  }

  .#{$ns}SelectControl {
    @if $InputGroup-select-borderWidth {
      .#{$ns}Select {
        background-color: $InputGroup-select-bg;
        border: $InputGroup-select-borderWidth
          solid
          $InputGroup-select-borderColor;

        @if $InputGroup-select-color !=$Form-select-color {
          color: $InputGroup-select-color;
        }
      }

      &:not(:last-child) .#{$ns}Select {
        border-right: 0;
      }

      &:first-child .#{$ns}Select {
        @if $InputGroup-select-borderRadius {
          border-top-left-radius: $InputGroup-select-borderRadius;
          border-bottom-left-radius: $InputGroup-select-borderRadius;
        }
      }

      &:last-child .#{$ns}Select {
        @if $InputGroup-select-borderRadius {
          border-top-right-radius: $InputGroup-select-borderRadius;
          border-bottom-right-radius: $InputGroup-select-borderRadius;
        }
      }
    }

    &:not(:first-child) .#{$ns}Select {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }

    &:not(:last-child) .#{$ns}Select {
      border-right-width: 0;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
  }

  @if $InputGroup-select-arrowColor !=$Form-select-caret-iconColor {
    .#{$ns}Select-arrow {
      color: $InputGroup-select-arrowColor;
    }
  }

  &.is-focused {
    .#{$ns}InputGroup-addOn,
    .#{$ns}TextControl-input,
    .#{$ns}Select,
    .#{$ns}InputGroup-btn .#{$ns}Button {
      border-color: $InputGroup-addOn-onFocused-borderColor;
    }

    @if $InputGroup-select-onFocused-bg !=$InputGroup-select-bg {
      .#{$ns}Select {
        background-color: $InputGroup-select-onFocused-bg;
      }
    }

    @if $InputGroup-select-onFocused-color !=$InputGroup-select-color {
      .#{$ns}Select {
        color: $InputGroup-select-onFocused-color;
      }
    }

    @if $InputGroup-select-onFocused-arrowColor !=$Form-select-caret-iconColor {
      .#{$ns}Select-arrow {
        color: $InputGroup-select-onFocused-arrowColor;
      }
    }

    .#{$ns}InputGroup-addOn {
      color: $primary;
    }
  }
}

.#{$ns}InputGroup:not(.is-inline) {
  display: flex;
}