// stylelint-disable selector-no-qualifying-type

//
// Base styles
//

.input-group {
  > .form-control,
  > .custom-select,
  > .custom-file {
    + .form-control,
    + .custom-select,
    + .custom-file {
      margin-left: -$input-border-width;
    }
  }

  > .form-control,
  > .custom-select {
    &:not(:last-child) { @include border-right-radius(0); }
    &:not(:first-child) { @include border-left-radius(0); }
  }

  // Custom file inputs have more complex markup, thus requiring different
  // border-radius overrides.
  > .custom-file {
    &:not(:last-child) .custom-file-label,
    &:not(:last-child) .custom-file-label::after { @include border-right-radius(0); }
    &:not(:first-child) .custom-file-label,
    &:not(:first-child) .custom-file-label::after { @include border-left-radius(0); }
  }

  // Seamless input groups
  &.input-group-seamless {
    > .form-control {
      border-radius: $input-border-radius;
    }

    > .input-group-append,
    > .input-group-prepend {
      position: absolute;
      top: 0;
      bottom: 0;
      z-index: 4;

      .input-group-text {
        padding: $input-group-padding-y $input-group-padding-x;
        background: transparent;
        border: none;
      }
    }

    > .input-group-append {
      right: 0;
    }
    
    > .input-group-middle {
      right: 0;
      left: 0;
    }

    > .input-group-prepend {
      left: 0;
    }

    > .form-control,
    > .custom-select {
      &:not(:last-child) {
        padding-right: 40px;
      }

      &:not(:first-child) {
        padding-left: 40px;
      }
    }
  }
}


// Prepend and append

.input-group-prepend,
.input-group-append {
  .btn + .btn,
  .btn + .input-group-text,
  .input-group-text + .input-group-text,
  .input-group-text + .btn {
    margin-left: -$input-border-width;
  }
}

.input-group-prepend { margin-right: -$input-border-width; }
.input-group-append { margin-left: -$input-border-width; }


// Textual addons

.input-group-text {
  font-size: $font-size-base;
  font-weight: $font-weight-normal;
  line-height: $input-line-height;
  color: $input-group-addon-color;
  background-color: $input-group-addon-bg;
  border: $input-border-width solid $input-group-addon-border-color;
  @include border-radius($input-border-radius);
}


// Sizing

.input-group-lg > .form-control,
.input-group-lg > .input-group-prepend > .input-group-text,
.input-group-lg > .input-group-middle > .input-group-text,
.input-group-lg > .input-group-append > .input-group-text,
.input-group-lg > .input-group-prepend > .btn,
.input-group-lg > .input-group-append > .btn {
  @extend .form-control-lg;
}

.input-group-sm > .form-control,
.input-group-sm > .input-group-prepend > .input-group-text,
.input-group-sm > .input-group-middle > .input-group-text,
.input-group-sm > .input-group-append > .input-group-text,
.input-group-sm > .input-group-prepend > .btn,
.input-group-sm > .input-group-append > .btn {
  @extend .form-control-sm;
}


// Prepend and append rounded corners
//
// These rulesets must come after the sizing ones to properly override sm and lg
// border-radius values when extending. They're more specific than we'd like
// with the `.input-group >` part, but without it, we cannot override the sizing.


.input-group > .input-group-prepend > .btn,
.input-group > .input-group-prepend > .input-group-text,
.input-group > .input-group-append:not(:last-child) > .btn,
.input-group > .input-group-append:not(:last-child) > .input-group-text,
.input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle),
.input-group > .input-group-append:last-child > .input-group-text:not(:last-child) {
  @include border-right-radius(0);
}

.input-group > .input-group-append > .btn,
.input-group > .input-group-append > .input-group-text,
.input-group > .input-group-prepend:not(:first-child) > .btn,
.input-group > .input-group-prepend:not(:first-child) > .input-group-text,
.input-group > .input-group-prepend:first-child > .btn:not(:first-child),
.input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child) {
  @include border-left-radius(0);
}

.input-group > .input-group-middle > .btn,
.input-group > .input-group-middle > .input-group-text {
  border-left: 0;
  border-right: 0;
  @include border-radius(0);
}

.input-group-middle{
  display: flex;
}