diff --git a/core/themes/claro/css/components/autocomplete-loading.module.css b/core/themes/claro/css/components/autocomplete-loading.module.css
index 45a71dea3f4c542c8769cce55680139f0ee796d7..491b8a8585a144067c79ec86be830b81cae6dfaa 100644
--- a/core/themes/claro/css/components/autocomplete-loading.module.css
+++ b/core/themes/claro/css/components/autocomplete-loading.module.css
@@ -34,6 +34,8 @@
  */
 
 .js .form-autocomplete {
+  margin-inline-end: calc(var(--input-border-size) - 1.5 * var(--input-padding-horizontal));
+  padding-inline-end: calc(var(--input-padding-horizontal) * 2.5 - var(--input-border-size));
   background-image: url("data:image/svg+xml,%3csvg width='40' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M8 1C3.46.827-.188 5.787 1.313 10.068c1.176 4.384 6.993 6.417 10.637 3.7.326-.39.565.276.846.442l3.74 3.739 1.413-1.414-4.35-4.35c2.811-3.468 1.15-9.247-3.062-10.71A7.003 7.003 0 008 1zm0 2c3.242-.123 5.849 3.42 4.777 6.477-.842 3.132-4.994 4.58-7.6 2.65-2.745-1.73-2.9-6.125-.285-8.044A5.006 5.006 0 018 3z' fill='%23868686'/%3e%3c/svg%3e");
   background-repeat: no-repeat;
   background-position: 100% 50%;
diff --git a/core/themes/claro/css/components/autocomplete-loading.module.pcss.css b/core/themes/claro/css/components/autocomplete-loading.module.pcss.css
index b4323d79e8fa0f74472563e823f08a277a99ecd5..ceda95199e3f90519c5c6d5e19ce934a9937338a 100644
--- a/core/themes/claro/css/components/autocomplete-loading.module.pcss.css
+++ b/core/themes/claro/css/components/autocomplete-loading.module.pcss.css
@@ -28,6 +28,8 @@
 
 .js {
   & .form-autocomplete {
+    margin-inline-end: calc(var(--input-border-size) - 1.5 * var(--input-padding-horizontal));
+    padding-inline-end: calc(var(--input-padding-horizontal) * 2.5 - var(--input-border-size));
     background-image: url(../../images/icons/868686/magnifier.svg);
     background-repeat: no-repeat;
     background-position: 100% 50%;