fix(snack-bar): improper button styling and improved handling of long text (#2991)

* Simplifies the snack bar styles, removing some redundancy.
* Fixes the snack bar using the `md-button` styles directly. This causes it to break if another `md-button` isn't on the page in order to import the styles. These changes switch to styling the snack bar button independently since it barely shares any styles with `md-button` anyway.
* Fixes a wrong selector that wasn't styling anything.
* Adds better handling for long text strings inside snack bars.

Fixes #2979.

Author: crisbeto

src/lib/snack-bar/simple-snack-bar.html

@@ -1,3 +1,2 @@
 <span class="mat-simple-snackbar-message">{{message}}</span>
-<button md-button class="mat-simple-snackbar-action mat-button"
-        *ngIf="hasAction" (click)="dismiss()">{{action}}</button>
+<button class="mat-simple-snackbar-action" *ngIf="hasAction" (click)="dismiss()">{{action}}</button>

src/lib/snack-bar/simple-snack-bar.scss

@@ -1,30 +1,35 @@
 @import '../core/style/variables';
+@import '../core/style/button-common';
+@import '../core/style/list-common';
 
-.mat-simple-snackbar {
+:host {
   display: flex;
   justify-content: space-between;
+  color: white;
+  line-height: 20px;
+  font: {
+    size: $mat-body-font-size-base;
+    family: $mat-font-family;
+  }
 }
 
 .mat-simple-snackbar-message {
-  box-sizing: border-box;
-  border: none;
-  color: white;
-  font-family: $mat-font-family;
-  font-size: 14px;
-  line-height: 20px;
-  outline: none;
-  text-decoration: none;
-  word-break: break-all;
+  @include mat-truncate-line;
 }
 
 .mat-simple-snackbar-action {
-  box-sizing: border-box;
-  color: white;
-  float: right;
-  font-weight: 600;
-  line-height: 20px;
-  margin: -5px 0 0 48px;
-  min-width: initial;
+  @include mat-button-reset;
+
+  background: none;
+  margin: -5px 0 0;
   padding: 5px;
   text-transform: uppercase;
-}
+  color: inherit;
+  line-height: inherit;
+  flex-shrink: 0;
+  font: {
+    family: inherit;
+    size: inherit;
+    weight: 600;
+  }
+}