Some style adjustments after re-examining the spec

Author: kseamon

src/material-experimental/popover-edit/_popover-edit.scss

@@ -3,6 +3,17 @@
 @import '../../lib/core/theming/theming';
 @import '../../lib/core/typography/typography-utils';
 
+@function mat-edit-hover-content-background($direction, $background-color) {
+  @return linear-gradient($direction, rgba($background-color, 0), $background-color 8px);
+}
+
+@function mat-edit-focus-background($underline-color, $background-color) {
+  @return linear-gradient(
+      0deg,
+      mat-color($underline-color),
+      mat-color($underline-color) 2px,
+      $background-color 2px);
+}
 
 @mixin mat-edit-theme($theme) {
   $background: map-get($theme, background);
@@ -13,17 +24,17 @@
 
   .mat-row-hover-content {
     align-items: center;
-    background: linear-gradient(90deg, rgba($background-color, 0), $background-color 8px);
+    background: mat-edit-hover-content-background(90deg, $background-color);
     bottom: 0;
     display: flex;
-    padding: 1px 4px 0;
+    padding: 0 4px 1px;
     position: absolute;
     right: 0;
     top: 0;
   }
 
   .mat-row-hover-content-rtl {
-    background: linear-gradient(270deg, rgba($background-color, 0), $background-color 8px);
+    background: mat-edit-hover-content-background(270deg, $background-color);
     left: 0;
     right: auto;
   }
@@ -32,13 +43,19 @@
     position: relative;
 
     &:focus {
-      border-bottom: 2px solid mat-color($primary);
+      background: mat-edit-focus-background($primary, $background-color);
       outline: none;
 
       .mat-row-hover-content {
-        // The bottom border is normally 1px high, so we need to adjust the position of the
-        // hover content when the cell has focus.
-        padding-top: 2px;
+        background:
+            mat-edit-focus-background($primary, transparent),
+            mat-edit-hover-content-background(90deg, $background-color);
+      }
+
+      .mat-row-hover-content-rtl {
+        background:
+            mat-edit-focus-background($primary, transparent),
+            mat-edit-hover-content-background(270deg, $background-color);
       }
     }
   }