refactor(material/list): fix action list CSS styles conflict with MDC-based list

The Angular Material action list has been styled using an element selector,
instead of using the corresponding CSS class. This meant that the MDC-based
list seemed to have a working action list, but in reality it was just working due
to the leaked styles from the non-MDC list.

This fixes the selector in the Angular Material list, and adds the necessary styles
for the action list to the MDC list styles.

Author: devversion

src/material-experimental/mdc-list/list.scss

@@ -10,6 +10,28 @@
   display: block;
 }
 
+// Remove the browser button appearance for action list button items. These
+// buttons should appear as if they were standard Material Design list items.
+.mat-mdc-action-list button.mdc-list-item {
+  background: none;
+  color: inherit;
+  border: none;
+  font: inherit;
+  outline: inherit;
+  -webkit-tap-highlight-color: transparent;
+  // Set the text alignment to "start" as buttons align their content
+  // centered by default. List content is aligned on the start.
+  text-align: left;
+
+  [dir='rtl'] & {
+    text-align: right;
+  }
+
+  &::-moz-focus-inner {
+    border: 0;
+  }
+}
+
 // MDC expects that the list items are always `<li>`, since we actually use `<button>` in some
 // cases, we need to make sure it expands to fill the available width.
 .mat-mdc-list-item,

src/material/list/list.scss

@@ -268,7 +268,7 @@ $item-inset-divider-offset: 72px;
   }
 }
 
-mat-action-list {
+.mat-action-list {
   // Remove the native button look and make it look like a list item
   button {
     background: none;
@@ -277,6 +277,8 @@ mat-action-list {
     font: inherit;
     outline: inherit;
     -webkit-tap-highlight-color: transparent;
+    // Set the text alignment to "start" as buttons align their content
+    // centered by default. List content is aligned on the start.
     text-align: left;
 
     [dir='rtl'] & {