.input-group-text {
  padding-left: $input-padding-x + 0.25rem;
  padding-right: $input-padding-x + 0.25rem;
  padding: 0 $input-padding-x + 0.25rem;
}

.input-group-prepend,
.input-group-append {
  margin: 0;

  .btn {
    border: none !important;
    line-height: 1;
    padding: $input-group-btn-padding;

    &:not(:hover) {
      background-color: transparent !important;
    }
  }

  .form-group {
    margin-bottom: 0;

    &.row {
      margin-left: 0;
      margin-right: 0;

      > .col {
        padding-left: 0;
        padding-right: 0;
      }
    }
  }
}

.input-group-prepend {
  > .input-group-text {
    border-right: none;
  }
  .ng-select-container {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }
}

.form-group-prepend {
  .form-control {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
  }
}

.input-group-append {
  > .input-group-text {
    border-radius: $border-radius-sm;
    border-left: none;
  }
  .form-control {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }
}

.x-input-group-search {
  display: flex;
  position: relative;

  .form-control {
    padding-right: $input-search-padding-offset;
    &:focus {
      border-color: $input-border-color;
    }
  }

  .input-group-append {
    position: absolute;
    right: 0.0625rem;
    top: 0.0625rem;
    bottom: 0.0625rem;

    .ng-select-container {
      border-top-left-radius: 0 !important;
      border-bottom-left-radius: 0 !important;
    }

    > .btn {
      min-width: 2rem;
      padding: $input-search-btn-padding-x $input-search-btn-padding-y;
      display: flex;
      justify-content: center;

      &:hover {
        @include box-shadow(-1px 0px $blue-var-5 !important);
        .x-icon-close {
          &:after, &:before {
            background-color: $search-icon-close-hover !important;
          }
        }
      }

      .x-icon-search {
        top: 0.125rem;
      }
    }
  }
}

*.bg-dark .x-input-group-search {
  .form-control {
    background-clip: border-box;
    border: $white;
  }

  .input-group-append {
    top: 0;
    right: 0;
    bottom: 0;
  }
}