Add tooltip multi-sections mixin to material_tooltip directory.

Seems like a common pattern where the normal paper tooltip padding is 24px, but
the horizontal divider only has 16px padding above and below.

PiperOrigin-RevId: 259836104

Author: Googler

angular_components/lib/material_tooltip/_mixins.scss

@@ -80,3 +80,29 @@
     }
   }
 }
+
+$paper-tooltip-default-section-padding: $mat-grid * 3;
+$paper-tooltip-midsection-vertical-padding: $mat-grid * 2;
+$paper-tooltip-section-border: 1px solid $mat-gray-300;
+
+// Mixin for a multi-section paper tooltip.
+//
+// This mixin should be applied on the selector for each section.
+// For single-section tooltips, the padding is 24px. If a section is
+// followed by another section, the bottom padding is 16px and a border
+// is drawn between the 2 sections. If a section is preceded by another
+// section, the top padding is 16px.
+@mixin paper-tooltip-section {
+  padding: $paper-tooltip-default-section-padding;
+
+  &:not(:first-child) {
+    padding-top: $paper-tooltip-midsection-vertical-padding;
+  }
+
+  // Only show the border when there's a section after the current section.
+  &:not(:last-child) {
+    border-bottom: $paper-tooltip-section-border;
+    padding-bottom: $paper-tooltip-midsection-vertical-padding;
+  }
+}
+

angular_components/lib/src/material_tooltip/paper_tooltip.scss

@@ -3,6 +3,7 @@
 // BSD-style license that can be found in the LICENSE file.
 
 @import 'package:angular_components/css/material/material';
+@import 'package:angular_components/material_tooltip/mixins';
 
 .paper-container {
   background-color: $mat-white;
@@ -11,7 +12,7 @@
   max-height: $mat-grid * 50;
   max-width: $mat-grid * 50;
   min-width: $mat-grid * 20;
-  padding: $mat-grid * 3;
+  padding: $paper-tooltip-default-section-padding;
 
   @media(max-width: $mat-grid * 56) { // account for padding
     max-width: 100vw;