NTP: Improve TabSwitcher hover interactions and visual design (#1853)

Author: noisysocks

special-pages/pages/new-tab/app/omnibar/components/TabSwitcher.module.css

@@ -3,6 +3,7 @@
     border-radius: 99px;
     box-shadow: 0px 1px 0px 0px  rgba(0, 0, 0, 0.05) inset;
     display: grid;
+    gap: 2px;
     grid-template-columns: repeat(var(--tab-count), 1fr);
     overflow: hidden;
     padding: var(--sp-0_5);
@@ -16,15 +17,24 @@
 .tab {
     align-items: center;
     background: none;
-    border-radius: 99px;
     border: none;
     color: var(--ntp-text-normal);
+    cursor: pointer;
     display: flex;
     gap: 6px;
     height: var(--sp-8);
     justify-content: center;
     padding: 0 var(--sp-3);
+    position: relative;
     z-index: 1;
+
+    &:hover:not([aria-selected="true"])::before {
+        background: var(--ntp-controls-raised-backdrop);
+        border-radius: 99px;
+        content: '';
+        inset: 0;
+        position: absolute;
+    }
 }
 
 .tabLabel {
@@ -40,8 +50,8 @@
     position: absolute;
     top: 2px;
     transition: translate 200ms ease;
-    translate: calc(2px + var(--tab-index) * 100%);
-    width: calc((100% - 4px) / var(--tab-count));
+    translate: calc(2px + var(--tab-index) * (100% + 2px));
+    width: calc((100% - 4px - (var(--tab-count) - 1) * 2px) / var(--tab-count));
     will-change: translate;
 
     [data-theme="dark"] & {