.sp-input-group {
  &.input-group {
    .form-control {
      &:focus {
        box-shadow: none;
        border-color: $input-border-color;
        z-index: 0;
      }
    }

    .input-group-text {
      position: relative;
      z-index: 2;
    }

    // Focus within styles
    &:focus-within {
      box-shadow: $input-focus-box-shadow;
      border-radius: $input-border-radius;

      .input-group-text,
      .form-control {
        border-color: $input-focus-border-color;
      }
    }

    // Invalid state styles
    &:has(.is-invalid) {
      border-radius: $input-border-radius;

      &:focus-within {
        border-color: $danger;
        box-shadow: 0 0 0 $input-focus-width rgba($danger, 0.25);
      }
    }
  }
}