fix(truncate-multi): fix pixel multiplication

packages/styles/_mixins.scss

@@ -0,0 +1,20 @@
+/// Replace `$search` with `$replace` in `$string`
+/// @param {String} $string - Initial string
+/// @param {String} $search - Substring to replace
+/// @param {String} $replace ('') - New value
+/// @return {String} - Updated string
+// Example Usage:
+// .selector {
+//   $string: 'The answer to life the universe and everything is 42.';
+//   content: str-replace($string, 'e', 'xoxo');
+// }
+@function str-replace($string, $search, $replace: "") {
+  $index: str-index($string, $search);
+
+  @if $index {
+    @return str-slice($string, 1, $index - 1) + $replace +
+      str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+  }
+
+  @return $string;
+}

packages/styles/_utils.scss

@@ -155,7 +155,8 @@ $sides: (top, right, bottom, left);
   position: relative;
   max-height: calc(var(--TLineHeight, 24px) * var(--TMaxLines, 5));
   overflow: hidden;
-  padding-right: calc(var(--TPosRight, 12px) * var(--TPadRight, 8px) + 4px) !important;
+  // You cannot multiply {number}px * {number}px in Sass, so we are removing the "px" from the --TPadRight variable
+  padding-right: calc(var(--TPosRight, 12px) * str-replace(var(--TPadRight, 8px), "px", "") + 4px) !important;
 
   .truncate-multi::before {
     position: absolute;

packages/styles/styles.scss

@@ -2,6 +2,7 @@
 // Do not remove the comment above - allows other apps to identify the style block
 
 @import "variables";
+@import "mixins";
 @import "typography";
 @import "utils";
 @import "forms/forms";