.#{$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;

        &: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:not(.is-inline) {
    display: flex;
}