/* ------------------------------------------------------------------------------
 *
 *  # Input group component
 *
 *  Overrides for input group component
 *
 * ---------------------------------------------------------------------------- */


// Base styles
.input-group {

    // Form group feedback
    .form-group-feedback {
        position: relative;
        flex: 1 1 auto;
        width: 1%;
        z-index: 4;
    }

    // Make sure icon is always on top
    .form-control-feedback,
    + .form-control-feedback,
    .form-control-feedback + & {
        z-index: 4;
    }

    // Override default Bootstrap border radiuses
    > .custom-select:not(.form-control-filled):not(:first-child),
    > .form-control:not(.form-control-filled):not(:first-child) {
        @include border-left-radius($input-border-radius);
    }
    > .custom-select:not(.form-control-filled):not(:last-child),
    > .form-control:not(.form-control-filled):not(:last-child) {
        @include border-right-radius($input-border-radius);
    }

    // Filled input field
    > .form-control-filled:not(:first-child),
    > .form-control-filled:not(:last-child) {
        @include border-top-radius($input-border-radius);
    }
}

// Textual addons
.input-group-text {
    padding-left: 0;
    padding-right: 0;

    // Icon
    i {
        display: block;
        top: 0;
    }
}


//
// Prepend and append elements
//

// Prepend elements
.input-group-prepend {
    margin-right: map-get($spacers, 3);

    // Spacing between text
    .input-group-text + .input-group-text {
        margin-left: map-get($spacers, 3);
    }

    // Rounded corners
    .input-group > & > .btn:last-of-type {
        @include border-right-radius($btn-border-radius);
    }
}

// Append elements
.input-group-append {
    margin-left: map-get($spacers, 3);

    // Spacing between text
    .input-group-text + .input-group-text {
        margin-left: map-get($spacers, 3);
    }

    // Rounded corners
    .input-group > & > .btn:first-of-type {
        @include border-left-radius($btn-border-radius);
    }
}

// Large size
.input-group-lg > .input-group-prepend,
.input-group-lg > .input-group-append {
    > .btn {
        padding-left: $btn-padding-x-lg;
        padding-right: $btn-padding-x-lg;

        // Border radius fixes
        &:first-of-type {
            @include border-left-radius($btn-border-radius-lg);
        }
        &:last-of-type {
            @include border-right-radius($btn-border-radius-lg);
        }
    }
    > .btn-icon {
        padding-left: $btn-padding-y-lg + (($line-height-computed - $icon-font-size) / 2);
        padding-right: $btn-padding-y-lg + (($line-height-computed - $icon-font-size) / 2);
    }
    > .input-group-text {
        padding-left: 0;
        padding-right: 0;
    }
}

// Small size
.input-group-sm > .input-group-prepend,
.input-group-sm > .input-group-append {
    > .btn {
        padding-left: $btn-padding-x-sm;
        padding-right: $btn-padding-x-sm;

        // Border radius fixes
        &:first-of-type {
            @include border-left-radius($btn-border-radius-sm);
        }
        &:last-of-type {
            @include border-right-radius($btn-border-radius-sm);
        }
    }
    > .btn-icon {
        padding-left: $btn-padding-y-sm + (($line-height-computed - $icon-font-size) / 2);
        padding-right: $btn-padding-y-sm + (($line-height-computed - $icon-font-size) / 2);
    }
    > .input-group-text {
        padding-left: 0;
        padding-right: 0;
    }
}