// Set default customise component variables here,
// Override it in theme variables files
$x-input-group-icon-zindex:          4       !default;
$x-input-group-icon-position:        0.45em  !default;
$x-input-group-icon-form-padding-sm: 1.75rem  !default;
$x-input-group-icon-form-padding:    2.5rem  !default;

.x-input-group {
  @extend %input-group,
          %flex-nowrap;

  .ng-select {
    @extend %flex-auto;
  }
}

.x-input-group-icon {
  background-color: theme-color("light");
  @extend %d-flex,
          %flex-1,
          %position-relative;

  .x-icon-container {
    color: theme-color("info-transparent");
    @extend %position-absolute,
            %align-self-center;

    &:first-child {
      left: $x-input-group-icon-position;
    }
    &:last-child {
      right: $x-input-group-icon-position;
    }
    ~ .form-control {
      padding-left: $x-input-group-icon-form-padding-sm;
    }
    @include media-breakpoint-up(sm) {
      font-size: map_get($icon-sizes, md);
      ~ .form-control {
        padding-left: $x-input-group-icon-form-padding;
      }
    }
  }
  .x-form-control-inputMask {
    padding-left: $x-input-group-icon-form-padding;
    @include hover-focus-active {
      position: relative;
      background: none;
      z-index: $x-input-group-icon-zindex;
    }
  }

  .form-control {
    &:nth-last-child(2) {
      @include border-right-radius($border-radius);
      padding-right: $x-input-group-icon-form-padding;
    }

    @include hover-focus-active {
      ~ .x-icon-container {
        z-index: $x-input-group-icon-zindex;
      }
    }
  }
  &:first-child:not(:last-child) {
    .form-control {
      @include border-right-radius(0);
    }
  }
  & + & {
    @extend %mt-2;
  }
}