From 4c10d2bd4c046ede62dd47c89cab127483c17cdc Mon Sep 17 00:00:00 2001
From: olly <olly@google.com>
Date: Fri, 18 Jun 2021 09:58:38 +0100
Subject: [PATCH] Migrate /-as-division to math.div

If google3 is the source-of-truth for this third_party code (or if this is legacy code that is no longer synced with an external source), just LGTM this CL and Rosie will submit it. If not, you should patch the upstream source of these files, since we will be disabling support for /-as-division in google3 before support is formally removed from the language.

See go/lsc-slash-as-division-deprecation.

Tested:
    TAP found no affected targets. No targets were built or tested.
    http://test/OCL:380056637:BASE:380052721:1623976139468:f2fd2cbd
PiperOrigin-RevId: 380140762
---
 docs/_sass/common/_reset.scss          |  6 ++++--
 docs/_sass/common/_variables.scss      | 22 ++++++++++++----------
 docs/_sass/common/classes/_grid.scss   |  4 +++-
 docs/_sass/common/components/_toc.scss |  4 +++-
 docs/_sass/components/_extensions.scss |  8 +++++---
 5 files changed, 27 insertions(+), 17 deletions(-)

diff --git a/docs/_sass/common/_reset.scss b/docs/_sass/common/_reset.scss
index b7657d344d..ef903ed0eb 100644
--- a/docs/_sass/common/_reset.scss
+++ b/docs/_sass/common/_reset.scss
@@ -1,3 +1,5 @@
+@use 'sass:list';
+
 @mixin block-elements {
   h1, h2, h3, h4, h5, h6, p,
   hr, blockquote, figure, pre, .highlighter-rouge,
@@ -33,7 +35,7 @@ html {
 body {
   padding: 0;
   margin: 0;
-  font: map-get($base, font-weight) #{map-get($base, font-size)}/#{map-get($base, line-height)} map-get($base, font-family);
+  font: map-get($base, font-weight) list.slash(map-get($base, font-size), map-get($base, line-height)) map-get($base, font-family);
   ::-moz-selection {
     background: $select-color;
   }
@@ -51,7 +53,7 @@ body {
 }
 
 input, textarea, select, button {
-  font: map-get($base, font-weight) #{map-get($base, font-size)}/#{map-get($base, line-height)} map-get($base, font-family);
+  font: map-get($base, font-weight) list.slash(map-get($base, font-size), map-get($base, line-height)) map-get($base, font-family);
   color: $text-color;
 }
 
diff --git a/docs/_sass/common/_variables.scss b/docs/_sass/common/_variables.scss
index 848a7371ba..8519a404df 100644
--- a/docs/_sass/common/_variables.scss
+++ b/docs/_sass/common/_variables.scss
@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 $base: (
   font-family:            (-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif),
   font-family-code:       (Menlo, Monaco, Consolas, Andale Mono, lucida console, Courier New, monospace),
@@ -114,16 +116,16 @@ $button-height-sm:        1.5rem;
 $button-height-xs:        1.2rem;
 
 $button: (
-  padding-y-xl:           ($button-height-xl - map-get($base, font-size-xl)) / 2,
-  padding-x-xl:           $button-height-xl / 3,
-  padding-y-lg:           ($button-height-lg - map-get($base, font-size-lg)) / 2,
-  padding-x-lg:           $button-height-lg / 3,
-  padding-y:              ($button-height - map-get($base, font-size)) / 2,
-  padding-x:              $button-height / 3,
-  padding-y-sm:           ($button-height-sm - map-get($base, font-size-sm)) / 2,
-  padding-x-sm:           $button-height-sm / 3,
-  padding-y-xs:           ($button-height-xs - map-get($base, font-size-xs)) / 2,
-  padding-x-xs:           $button-height-xs / 3,
+  padding-y-xl:           math.div($button-height-xl - map-get($base, font-size-xl), 2),
+  padding-x-xl:           math.div($button-height-xl, 3),
+  padding-y-lg:           math.div($button-height-lg - map-get($base, font-size-lg), 2),
+  padding-x-lg:           math.div($button-height-lg, 3),
+  padding-y:              math.div($button-height - map-get($base, font-size), 2),
+  padding-x:              math.div($button-height, 3),
+  padding-y-sm:           math.div($button-height-sm - map-get($base, font-size-sm), 2),
+  padding-x-sm:           math.div($button-height-sm, 3),
+  padding-y-xs:           math.div($button-height-xs - map-get($base, font-size-xs), 2),
+  padding-x-xs:           math.div($button-height-xs, 3),
 
   pill-radius:            6rem,
 
diff --git a/docs/_sass/common/classes/_grid.scss b/docs/_sass/common/classes/_grid.scss
index 770b1a6ae2..15047d0320 100644
--- a/docs/_sass/common/classes/_grid.scss
+++ b/docs/_sass/common/classes/_grid.scss
@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 $grid-columns: 12;
 
 .grid-container {
@@ -18,7 +20,7 @@ $grid-columns: 12;
     @include flex(1);
   } @else {
     @include flex(none);
-    width: percentage($columns / $grid-columns);
+    width: percentage(math.div($columns, $grid-columns));
   }
 }
 
diff --git a/docs/_sass/common/components/_toc.scss b/docs/_sass/common/components/_toc.scss
index 15a13ac821..6ba7f6fc8b 100644
--- a/docs/_sass/common/components/_toc.scss
+++ b/docs/_sass/common/components/_toc.scss
@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 ul.toc {
   display: block;
   margin: 0;
@@ -13,7 +15,7 @@ ul.toc {
   }
   a {
     display: inline-block;
-    margin: map-get($spacers, 1) / 4 0;
+    margin: math.div(map-get($spacers, 1), 4) 0;
     text-decoration: none !important;
     @include link-colors($text-color, $main-color-1);
   }
diff --git a/docs/_sass/components/_extensions.scss b/docs/_sass/components/_extensions.scss
index 71aae5840f..b410ed1e1e 100644
--- a/docs/_sass/components/_extensions.scss
+++ b/docs/_sass/components/_extensions.scss
@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 .extensions {
   margin: map-get($spacers, 3) 0;
   @extend .d-print-none;
@@ -17,16 +19,16 @@
 }
 
 .extensions--video {
-  padding-top: percentage(315 / 560);
+  padding-top: percentage(math.div(315, 560));
 }
 
 .extensions--slide {
-  padding-top: percentage(487 / 599);
+  padding-top: percentage(math.div(487, 599));
 }
 
 .extensions--demo {
   min-height: 340px;
-  padding-top: percentage(315 / 560);
+  padding-top: percentage(math.div(315, 560));
 }
 
 .extensions--audio {