fix(material/button): compute M2 icon-button density padding with CSS calc

Author: jvanderen1

src/material/button/_icon-button-theme.scss

@@ -1,5 +1,4 @@
 @use 'sass:map';
-@use 'sass:math';
 @use './m2-icon-button';
 @use './m3-icon-button';
 @use '../core/tokens/token-utils';
@@ -85,14 +84,11 @@
       --mdc-icon-button-state-layer-size: #{$calculated-size};
       --mat-icon-button-state-layer-size: #{$calculated-size};
 
-      // TODO: Switch calculated-size to "var(--mat-icon-button-state-layer-size)"
-      // Currently fails validation because the variable is "undefined"
-      // in the sass stack.
-      // TODO: Switch icon-size to "var(--mat-icon-button-icon-size)". Currently
-      // fails validation because the variable is "undefined" in the sass stack.
       width: var(--mat-icon-button-state-layer-size);
       height: var(--mat-icon-button-state-layer-size);
-      padding: math.div($calculated-size - $icon-size, 2);
+      // Note: this is wrapped in an interpolation, because of an internal lint rule that bans
+      // interpolations in `calc`, even though this is the only way to achieve what we're looking for.
+      padding: calc(var(--mat-icon-button-state-layer-size, #{$calculated-size}) - var(--mat-icon-button-icon-size, #{$icon-size})) / 2;
     }
   }
 }