Tab Search: Fix margins and close button styling

This CL fixes it so the margins from the beginning of the tab search
item to the favicon match those from the end of the tab search item
to the close button.

This CL also hides the close button when the tab search item is not
hovered or focused to increase the space available to tab titles
and hostnames.

Before:
https://drive.google.com/file/d/1cmuKp4R_nVc7eAaljtIbFX2g0nwlIzKT/view?usp=sharing

After:
https://drive.google.com/file/d/1oa0lyapwxIGwtCpbxc61bJdPD03gfdVC/view?usp=sharing

Bug: 1128599
Change-Id: I6d49a6982483a87028f2d562884f752b82ea6cf3
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2582629Reviewed-by: Roman Arora <romanarora@chromium.org>
Commit-Queue: Thomas Lukaszewicz <tluk@chromium.org>
Cr-Commit-Position: refs/heads/master@{#836203}

chrome/browser/resources/tab_search/tab_search_item.html

@@ -3,22 +3,30 @@
     outline: none;
   }
 
-  :host(:hover, .selected) .button-container cr-icon-button {
-    --cr-icon-button-fill-color: var(--mwb-icon-button-fill-color);
+  :host(:hover, .selected) .button-container {
+    height: auto;
+    width: auto;
   }
 
-  @media (prefers-color-scheme: dark) {
-    :host(:hover, .selected) .button-container cr-icon-button {
-      --cr-icon-button-ripple-opacity: 0.15;
-    }
+  .button-container {
+    flex-shrink: 0;
+    height: 0;
+    overflow: hidden;
+    width: 0;
   }
 
   .button-container cr-icon-button {
-    --cr-icon-button-fill-color: transparent;
+    --cr-icon-button-fill-color: var(--mwb-icon-button-fill-color);
     border: 2px solid transparent;
     border-radius: 50%;
   }
 
+  @media (prefers-color-scheme: dark) {
+    .button-container cr-icon-button {
+      --cr-icon-button-ripple-opacity: 0.15;
+    }
+  }
+
   .button-container cr-icon-button:hover {
     background-color: var(--mwb-icon-button-hover-background-color);
   }
@@ -61,9 +69,9 @@
   }
 
   cr-icon-button {
-    --cr-icon-button-margin-end: calc(var(--mwb-icon-size) / 4);
-    --cr-icon-button-margin-start: calc(var(--mwb-icon-size) / 4);
     --cr-icon-button-icon-size: var(--mwb-icon-size);
+    --cr-icon-button-margin-end: 0;
+    --cr-icon-button-margin-start: 0;
     --cr-icon-button-size: calc(var(--mwb-icon-size) * 1.5);
   }