Issue #3212073 by Sakthivel M, kiran.kadam911, javi-er, Gauravmahlawat,...

Issue #3212073 by Sakthivel M, kiran.kadam911, javi-er, Gauravmahlawat, ranjith_kumar_k_u, mherchel: Olivero: Primary navigation toggle button(plus/minus) is not vertically center below 1200 res

core/themes/olivero/css/components/navigation/nav-primary-button.css

@@ -31,7 +31,7 @@
   overflow: hidden;
   width: 2.25rem;
   height: 2.25rem;
-  margin-top: 2px; /* Visually align button with menu link text. */
+  margin-top: 0.5625rem; /* Visually align button with menu link text. */
   padding-top: 0;
   padding-bottom: 0;
   cursor: pointer;

core/themes/olivero/css/components/navigation/nav-primary-button.pcss.css

@@ -10,7 +10,7 @@
   overflow: hidden;
   width: var(--sp2);
   height: var(--sp2);
-  margin-block-start: 2px; /* Visually align button with menu link text. */
+  margin-block-start: var(--sp0-5); /* Visually align button with menu link text. */
   padding-block: 0;
   padding-inline-start: 0;
   padding-inline-end: 0;

core/themes/olivero/css/components/navigation/nav-primary.css

@@ -134,7 +134,7 @@
 .primary-nav__menu-link--button.primary-nav__menu-link--has-children:before,
     .primary-nav__menu-link--button.primary-nav__menu-link--has-children:after {
       position: absolute;
-      top: 1.25rem;
+      top: 1.625rem; /* Visually align button with menu link text. */
       width: 1.125rem;
       height: 0;
       content: "";

core/themes/olivero/css/components/navigation/nav-primary.pcss.css

@@ -72,8 +72,8 @@
     &:before,
     &:after {
       position: absolute;
-      inset-block-start: 20px;
       inset-inline-end: 9px;
+      inset-block-start: calc(var(--sp0-5) + 17px); /* Visually align button with menu link text. */
       width: 18px;
       height: 0;
       content: "";