feat(tooltip): Define styling to set the full-screen dialog size depending on the viewport size.

In particular:
* x-small screens (< 600px x 960px [vertical] OR < 720px x 400px [horizontal])
  * dialog is full-screen
* small screens (<720px x 1024px)
  * size of dialog is fluid (with a max height/width of 560px) , but has a minimum vertical margin of 80px and minimum horizontal margin of 56px.
* medium screens (< 960px x 1440px)
  * size of dialog is fixed (560px width and height), horizontal and vertical margins are fluid
* large and x-large screens (> 960px x 1440px)
  * size of dialog is fluid, vertical margin is fluid, but has a minimum horizontal margin of 200px

Full-screen dialog is still in development and not yet suitable for use.

PiperOrigin-RevId: 351692795

Author: sayris

packages/mdc-dialog/_mixins.scss

@@ -88,6 +88,10 @@
       );
       @include theme.property(z-index, $z-index);
     }
+
+    &.mdc-dialog--fullscreen {
+      @include _fullscreen-dialog-size($query: $query);
+    }
   }
 
   .mdc-dialog__scrim {
@@ -579,3 +583,95 @@
     }
   }
 }
+
+@mixin _fullscreen-dialog-size($query: feature-targeting.all()) {
+  $feat-structure: feature-targeting.create-target($query, structure);
+  .mdc-dialog__surface {
+    // Medium screens
+    @media (max-width: 960px) and (max-height: 1440px) {
+      @include feature-targeting.targets($feat-structure) {
+        max-height: 560px;
+        max-width: 560px;
+      }
+    }
+
+    // Small screens
+    @media (max-width: 720px) and (max-height: 1023px) {
+      @include feature-targeting.targets($feat-structure) {
+        $max-small-height: 560px;
+        $max-small-width: 560px;
+        $min-horizontal-small-margin: 56px;
+        $min-vertical-small-margin: 80px;
+        @include _fluid-size-calc(
+          $vertical-margin: $min-vertical-small-margin,
+          $max-height: $max-small-height,
+          $horizontal-margin: $min-horizontal-small-margin,
+          $max-width: $max-small-width
+        );
+      }
+    }
+
+    // X-Small Screens (horizontal)
+    @media (max-width: 720px) and (max-height: 400px) {
+      @include feature-targeting.targets($feat-structure) {
+        max-width: 100vw;
+        width: 100vw;
+        max-height: 100vh;
+        height: 100vh;
+      }
+      @include shape-mixins.radius(0, $query: $query);
+    }
+
+    // X-Small Screens (vertical)
+    @media (max-width: 600px) and (max-height: 960px) {
+      @include feature-targeting.targets($feat-structure) {
+        max-width: 100vw;
+        width: 100vw;
+        max-height: 100vh;
+        height: 100vh;
+      }
+      @include shape-mixins.radius(0, $query: $query);
+    }
+
+    // Large to X-Large screens
+    @media (min-width: 960px) and (min-height: 1440px) {
+      @include feature-targeting.targets($feat-structure) {
+        $min-horizontal-margin: 200px;
+        max-width: calc(100vw - #{$min-horizontal-margin * 2});
+      }
+    }
+  }
+}
+
+/// Defines styling to specify a fluid dialog size while maintaining a specific
+/// vertical and horizontal margin.
+/// @param  {Number} $vertical-margin
+/// @param  {Number} $max-height
+/// @param  {Number} $horizontal-margin
+/// @param  {Number} $max-width
+@mixin _fluid-size-calc(
+  $vertical-margin,
+  $max-height,
+  $horizontal-margin,
+  $max-width
+) {
+  $max-width-calc-expr: calc(100vw - #{$horizontal-margin * 2});
+  $max-width-breakpoint: $max-width + ($horizontal-margin * 2);
+
+  @media (max-width: $max-width-breakpoint) {
+    max-width: $max-width-calc-expr;
+  }
+  @media (min-width: $max-width-breakpoint) {
+    max-width: $max-width;
+  }
+
+  $max-height-calc-expr: calc(100vh - #{$vertical-margin * 2});
+  $max-height-breakpoint: $max-height + ($vertical-margin * 2);
+
+  @media (max-height: $max-height-breakpoint) {
+    max-height: $max-height-calc-expr;
+  }
+  @media (min-height: $max-height-breakpoint) {
+    max-height: $max-height;
+  }
+}