diff --git a/chrome/browser/resources/new_tab_page/realbox/realbox.html b/chrome/browser/resources/new_tab_page/realbox/realbox.html
index 6f77d909ed5ad..73d9bc0f2fc3c 100644
--- a/chrome/browser/resources/new_tab_page/realbox/realbox.html
+++ b/chrome/browser/resources/new_tab_page/realbox/realbox.html
@@ -3,6 +3,9 @@
--ntp-realbox-border-radius: calc(0.5 * var(--ntp-realbox-height));
--ntp-realbox-height: 44px;
--ntp-realbox-shadow: 0 1px 6px 0 var(--color-realbox-shadow);
+ --ntp-realbox-icon-width: 26px;
+ --ntp-realbox-inner-icon-margin: 8px;
+ --ntp-realbox-voice-icon-offset: 16px;
border-radius: var(--ntp-realbox-border-radius);
box-shadow: var(--ntp-realbox-shadow);
font-size: 16px;
@@ -13,6 +16,10 @@
--ntp-realbox-shadow: 0 2px 6px 0 var(--color-realbox-shadow);
}
+ :host([realbox-lens-search-enabled_]) {
+ --ntp-realbox-voice-icon-offset: 53px;
+ }
+
@media (forced-colors: active) {
:host {
border: 1px solid ActiveBorder;
@@ -50,7 +57,7 @@
font-size: inherit;
height: 100%;
outline: none;
- padding-inline-end: 44px;
+ padding-inline-end: calc(var(--ntp-realbox-voice-icon-offset) + var(--ntp-realbox-icon-width) + var(--ntp-realbox-inner-icon-margin));
padding-inline-start: 52px;
position: relative;
width: 100%;
@@ -118,7 +125,7 @@
pointer-events: auto;
position: absolute;
right: 16px;
- width: 26px;
+ width: var(--ntp-realbox-icon-width);
}
:host([single-colored-icons]) #voiceSearchButton,
@@ -146,12 +153,12 @@
}
:host([realbox-lens-search-enabled_]):host-context([dir='rtl']) #voiceSearchButton {
- left: 53px;
+ left: var(--ntp-realbox-voice-icon-offset);
right: unset;
}
:host([realbox-lens-search-enabled_]) #voiceSearchButton {
- right: 53px;
+ right: var(--ntp-realbox-voice-icon-offset);
}
:host-context([dir='rtl']) .realbox-icon-button {
@@ -164,7 +171,7 @@
}
:-webkit-any(input, ntp-realbox-icon, .realbox-icon-button) {
- z-index: 100;
+ z-index: 100;
}
ntp-realbox-dropdown {
@@ -188,22 +195,18 @@
-