Bootstrap 5 box-shadow перекрывается в группе ввода

Я пытаюсь изменить css моей группы ввода и текста группы ввода, когда ввод находится в фокусе В этом случае я использую бутстрап 5.

Но как вы можете видеть на изображении ниже. Есть некоторое перекрытие между input и input-group-text

Пока это моя реализация

CSS:

.input-group:focus-within .input-group-text {
        border-color: #ced4da;
    }
    
    .input-group:focus-within .form-control:focus~.input-group-text {
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        border-color: #80bdff;
        box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.25);
    }
    

HTML:

<div class = "form-group col-xs-6 col-md-6">
    <label for = "password" class = "required control-label col-form-label text-md-end">Kata sandi</label>
    <div class = "input-group">
         <input type = "text" class = "form-control @error('password') is-invalid @enderror" name = "password" id = "password" placeholder = "Masukkan kata sandi" autocomplete = "off">
         <span class = "input-group-text rounded-end"><i class = "eyepass eyeCross"></i></span> @error('password')
         <div class = "invalid-feedback" role = "alert">
                 <strong>{{ $message }}</strong>
          </div>
     @enderror
</div>

РЕЗУЛЬТАТ :

Попробуйте добавить отступы к тексту группы ввода, но похоже, что он не работает.

ОБНОВЛЯТЬ:

Основываясь на ответе HDP, тень коробки выглядит лучше. Но каким-то образом теневые левые и правые отступы выглядят намного больше, чем размер по умолчанию.