@carbon/styles 1.35.0 → 1.36.0-rc.0

package/scss/components/pagination/_pagination.scss

@@ -15,7 +15,7 @@
 @use '../../breakpoint' as *;
 @use '../../theme' as *;
 @use '../../utilities/component-reset';
-@use '../../utilities/convert' as *;
+@use '../../utilities/convert';
 @use '../../utilities/focus-outline' as *;
 @use '../../utilities/high-contrast-mode' as *;
 
@@ -33,7 +33,7 @@
 
     display: flex;
     width: calc(100% - 1px);
-    min-height: rem(40px);
+    min-height: convert.to-rem(40px);
     align-items: center;
     justify-content: space-between;
     border-top: 1px solid $border-subtle;
@@ -66,11 +66,11 @@
   }
 
   .#{$prefix}--pagination--sm {
-    min-height: rem(32px);
+    min-height: convert.to-rem(32px);
   }
 
   .#{$prefix}--pagination--lg {
-    min-height: rem(48px);
+    min-height: convert.to-rem(48px);
   }
 
   .#{$prefix}--pagination .#{$prefix}--select {
@@ -89,7 +89,7 @@
     width: auto;
     min-width: auto;
     height: 100%;
-    line-height: rem(40px);
+    line-height: convert.to-rem(40px);
   }
 
   // Extra specificity is needed to preserve padding
@@ -100,11 +100,11 @@
   }
 
   .#{$prefix}--pagination--sm .#{$prefix}--select-input {
-    line-height: rem(32px);
+    line-height: convert.to-rem(32px);
   }
 
   .#{$prefix}--pagination--lg .#{$prefix}--select-input {
-    line-height: rem(48px);
+    line-height: convert.to-rem(48px);
   }
 
   .#{$prefix}--pagination .#{$prefix}--select-input:hover {
@@ -158,17 +158,17 @@
   }
 
   .#{$prefix}--pagination__left .#{$prefix}--pagination__text {
-    margin-right: rem(1px);
+    margin-right: convert.to-rem(1px);
   }
 
   .#{$prefix}--pagination__right .#{$prefix}--pagination__text {
     margin-right: 1rem;
-    margin-left: rem(1px);
+    margin-left: convert.to-rem(1px);
   }
 
   .#{$prefix}--pagination__right
     .#{$prefix}--pagination__text.#{$prefix}--pagination__page-text {
-    margin-right: rem(1px);
+    margin-right: convert.to-rem(1px);
     margin-left: 1rem;
   }
 
@@ -204,9 +204,9 @@
     @include component-reset.reset;
 
     display: flex;
-    width: rem(40px);
-    height: rem(40px);
-    min-height: rem(32px);
+    width: convert.to-rem(40px);
+    height: convert.to-rem(40px);
+    min-height: convert.to-rem(32px);
     align-items: center;
     justify-content: center;
     border: none;
@@ -227,15 +227,15 @@
   .#{$prefix}--pagination--sm .#{$prefix}--pagination__button,
   .#{$prefix}--pagination--sm
     .#{$prefix}--btn--ghost.#{$prefix}--pagination__button {
-    width: rem(32px);
-    height: rem(32px);
+    width: convert.to-rem(32px);
+    height: convert.to-rem(32px);
   }
 
   .#{$prefix}--pagination--lg .#{$prefix}--pagination__button,
   .#{$prefix}--pagination--lg
     .#{$prefix}--btn--ghost.#{$prefix}--pagination__button {
-    width: rem(48px);
-    height: rem(48px);
+    width: convert.to-rem(48px);
+    height: convert.to-rem(48px);
   }
 
   .#{$prefix}--pagination__button:focus,

package/scss/components/pagination/_unstable_pagination.scss

@@ -12,7 +12,7 @@
 @use '../../theme' as *;
 @use '../../type' as *;
 @use '../../utilities/component-reset';
-@use '../../utilities/convert' as *;
+@use '../../utilities/convert';
 @use '../../utilities/focus-outline' as *;
 @use '../select';
 
@@ -26,7 +26,7 @@
 
     display: flex;
     width: 100%;
-    min-height: rem(40px);
+    min-height: convert.to-rem(40px);
     align-items: center;
     justify-content: space-between;
     border-top: 1px solid $border-subtle;
@@ -61,22 +61,22 @@
 
   .#{$prefix}--unstable-pagination__left
     .#{$prefix}--unstable-pagination__text {
-    margin-right: rem(1px);
+    margin-right: convert.to-rem(1px);
   }
 
   .#{$prefix}--unstable-pagination__right
     .#{$prefix}--unstable-pagination__text {
     margin-right: $spacing-05;
-    margin-left: rem(1px);
+    margin-left: convert.to-rem(1px);
   }
 
   .#{$prefix}--unstable-pagination__button {
     @include component-reset.reset;
 
     display: flex;
-    width: rem(40px);
-    height: rem(40px);
-    min-height: rem(32px);
+    width: convert.to-rem(40px);
+    height: convert.to-rem(40px);
+    min-height: convert.to-rem(32px);
     align-items: center;
     justify-content: center;
     border: none;
@@ -144,7 +144,7 @@
     min-width: auto;
     height: 100%;
     padding: 0 2.25rem 0 $spacing-05;
-    line-height: rem(40px);
+    line-height: convert.to-rem(40px);
   }
 
   .#{$prefix}--unstable-pagination__page-selector

package/scss/components/pagination-nav/_pagination-nav.scss

@@ -13,7 +13,6 @@
 @use '../../type' as *;
 @use '../../theme' as *;
 @use '../../utilities/button-reset';
-@use '../../utilities/convert' as *;
 @use '../../utilities/focus-outline' as *;
 @use '../../utilities/high-contrast-mode' as *;
 @use '../../utilities/visually-hidden' as *;

package/scss/components/popover/_popover.scss

@@ -15,7 +15,7 @@
 @use '../../utilities/high-contrast-mode' as *;
 @use '../../utilities/focus-outline' as *;
 @use '../../utilities/' as *;
-@use '../../utilities/convert' as *;
+@use '../../utilities/convert';
 @use '../../utilities/layout';
 
 /// The Popover component is used for triggering a pop-up next to a trigger
@@ -68,10 +68,13 @@ $popover-offset: custom-property.get-var('popover-offset', 0rem);
 // Customize the dimensions of the caret by specifying its width or height.
 // These values will be flipped in left or right directions to have the
 // correct dimensions
-$popover-caret-width: custom-property.get-var('popover-caret-width', rem(12px));
+$popover-caret-width: custom-property.get-var(
+  'popover-caret-width',
+  convert.to-rem(12px)
+);
 $popover-caret-height: custom-property.get-var(
   'popover-caret-height',
-  rem(6px)
+  convert.to-rem(6px)
 );
 
 @mixin popover {
@@ -105,7 +108,10 @@ $popover-caret-height: custom-property.get-var(
 
   // Caret tip modifier
   .#{$prefix}--popover--caret {
-    @include custom-property.declaration('popover-offset', rem(10px));
+    @include custom-property.declaration(
+      'popover-offset',
+      convert.to-rem(10px)
+    );
   }
 
   // Popover, this element contains both the caret and the popover content
@@ -125,7 +131,7 @@ $popover-caret-height: custom-property.get-var(
     z-index: z('floating');
     display: none;
     width: max-content;
-    max-width: rem(368px);
+    max-width: convert.to-rem(368px);
     background-color: $popover-background-color;
     border-radius: $popover-border-radius;
     color: $popover-text-color;
@@ -174,7 +180,7 @@ $popover-caret-height: custom-property.get-var(
 
   .#{$prefix}--popover--tab-tip
     > .#{$prefix}--popover
-    .#{$prefix}--popover-caret {
+    > .#{$prefix}--popover-caret {
     display: none;
   }
 
@@ -185,7 +191,7 @@ $popover-caret-height: custom-property.get-var(
   // Popover content placement
   .#{$prefix}--popover--bottom
     > .#{$prefix}--popover
-    .#{$prefix}--popover-content {
+    > .#{$prefix}--popover-content {
     bottom: 0;
     left: 50%;
     transform: translate(-50%, calc(100% + $popover-offset));
@@ -193,7 +199,7 @@ $popover-caret-height: custom-property.get-var(
 
   .#{$prefix}--popover--bottom-left
     > .#{$prefix}--popover
-    .#{$prefix}--popover-content {
+    > .#{$prefix}--popover-content {
     bottom: 0;
     left: 0;
     transform: translate(
@@ -204,7 +210,7 @@ $popover-caret-height: custom-property.get-var(
 
   .#{$prefix}--popover--bottom-right
     > .#{$prefix}--popover
-    .#{$prefix}--popover-content {
+    > .#{$prefix}--popover-content {
     right: 0;
     bottom: 0;
     transform: translate($popover-offset, calc(100% + $popover-offset));
@@ -213,13 +219,13 @@ $popover-caret-height: custom-property.get-var(
   // Popover hover area placement
   .#{$prefix}--popover--bottom
     > .#{$prefix}--popover
-    .#{$prefix}--popover-content::before,
+    > .#{$prefix}--popover-content::before,
   .#{$prefix}--popover--bottom-left
     > .#{$prefix}--popover
-    .#{$prefix}--popover-content::before,
+    > .#{$prefix}--popover-content::before,
   .#{$prefix}--popover--bottom-right
     > .#{$prefix}--popover
-    .#{$prefix}--popover-content::before {
+    > .#{$prefix}--popover-content::before {
     top: 0;
     right: 0;
     left: 0;
@@ -230,13 +236,13 @@ $popover-caret-height: custom-property.get-var(
   // Caret placement
   .#{$prefix}--popover--bottom
     > .#{$prefix}--popover
-    .#{$prefix}--popover-caret,
+    > .#{$prefix}--popover-caret,
   .#{$prefix}--popover--bottom-left
     > .#{$prefix}--popover
-    .#{$prefix}--popover-caret,
+    > .#{$prefix}--popover-caret,
   .#{$prefix}--popover--bottom-right
     > .#{$prefix}--popover
-    .#{$prefix}--popover-caret {
+    > .#{$prefix}--popover-caret {
     bottom: 0;
     left: 50%;
     width: $popover-caret-width;
@@ -252,7 +258,7 @@ $popover-caret-height: custom-property.get-var(
   // Popover content placement
   .#{$prefix}--popover--top
     > .#{$prefix}--popover
-    .#{$prefix}--popover-content {
+    > .#{$prefix}--popover-content {
     top: 0;
     left: 50%;
     transform: translate(-50%, calc(-100% - $popover-offset));
@@ -260,7 +266,7 @@ $popover-caret-height: custom-property.get-var(
 
   .#{$prefix}--popover--top-left
     > .#{$prefix}--popover
-    .#{$prefix}--popover-content {
+    > .#{$prefix}--popover-content {
     top: 0;
     left: 0;
     transform: translate(
@@ -271,7 +277,7 @@ $popover-caret-height: custom-property.get-var(
 
   .#{$prefix}--popover--top-right
     > .#{$prefix}--popover
-    .#{$prefix}--popover-content {
+    > .#{$prefix}--popover-content {
     top: 0;
     right: 0;
     transform: translate($popover-offset, calc(-100% - $popover-offset));
@@ -280,13 +286,13 @@ $popover-caret-height: custom-property.get-var(
   // Popover hover area placement
   .#{$prefix}--popover--top
     > .#{$prefix}--popover
-    .#{$prefix}--popover-content::before,
+    > .#{$prefix}--popover-content::before,
   .#{$prefix}--popover--top-left
     > .#{$prefix}--popover
-    .#{$prefix}--popover-content::before,
+    > .#{$prefix}--popover-content::before,
   .#{$prefix}--popover--top-right
     > .#{$prefix}--popover
-    .#{$prefix}--popover-content::before {
+    > .#{$prefix}--popover-content::before {
     right: 0;
     bottom: 0;
     left: 0;
@@ -295,13 +301,13 @@ $popover-caret-height: custom-property.get-var(
   }
 
   // Caret placement
-  .#{$prefix}--popover--top > .#{$prefix}--popover .#{$prefix}--popover-caret,
+  .#{$prefix}--popover--top > .#{$prefix}--popover > .#{$prefix}--popover-caret,
   .#{$prefix}--popover--top-left
     > .#{$prefix}--popover
-    .#{$prefix}--popover-caret,
+    > .#{$prefix}--popover-caret,
   .#{$prefix}--popover--top-right
     > .#{$prefix}--popover
-    .#{$prefix}--popover-caret {
+    > .#{$prefix}--popover-caret {
     top: 0;
     left: 50%;
     width: $popover-caret-width;
@@ -317,7 +323,7 @@ $popover-caret-height: custom-property.get-var(
   // Popover content placement
   .#{$prefix}--popover--right
     > .#{$prefix}--popover
-    .#{$prefix}--popover-content {
+    > .#{$prefix}--popover-content {
     top: 50%;
     left: 100%;
     // Add in 0.1px to prevent rounding errors where the content is
@@ -327,7 +333,7 @@ $popover-caret-height: custom-property.get-var(
 
   .#{$prefix}--popover--right-top
     > .#{$prefix}--popover
-    .#{$prefix}--popover-content {
+    > .#{$prefix}--popover-content {
     top: 50%;
     left: 100%;
     transform: translate(
@@ -338,7 +344,7 @@ $popover-caret-height: custom-property.get-var(
 
   .#{$prefix}--popover--right-bottom
     > .#{$prefix}--popover
-    .#{$prefix}--popover-content {
+    > .#{$prefix}--popover-content {
     bottom: 50%;
     left: 100%;
     transform: translate($popover-offset, calc(0.5 * $popover-offset + 16px));
@@ -347,13 +353,13 @@ $popover-caret-height: custom-property.get-var(
   // Popover hover area placement
   .#{$prefix}--popover--right
     > .#{$prefix}--popover
-    .#{$prefix}--popover-content::before,
+    > .#{$prefix}--popover-content::before,
   .#{$prefix}--popover--right-top
     > .#{$prefix}--popover
-    .#{$prefix}--popover-content::before,
+    > .#{$prefix}--popover-content::before,
   .#{$prefix}--popover--right-bottom
     > .#{$prefix}--popover
-    .#{$prefix}--popover-content::before {
+    > .#{$prefix}--popover-content::before {
     top: 0;
     bottom: 0;
     left: 0;
@@ -362,13 +368,15 @@ $popover-caret-height: custom-property.get-var(
   }
 
   // Caret placement
-  .#{$prefix}--popover--right > .#{$prefix}--popover .#{$prefix}--popover-caret,
+  .#{$prefix}--popover--right
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-caret,
   .#{$prefix}--popover--right-top
     > .#{$prefix}--popover
-    .#{$prefix}--popover-caret,
+    > .#{$prefix}--popover-caret,
   .#{$prefix}--popover--right-bottom
     > .#{$prefix}--popover
-    .#{$prefix}--popover-caret {
+    > .#{$prefix}--popover-caret {
     top: 50%;
     left: 100%;
     width: $popover-caret-height;
@@ -384,7 +392,7 @@ $popover-caret-height: custom-property.get-var(
   // Popover content placement
   .#{$prefix}--popover--left
     > .#{$prefix}--popover
-    .#{$prefix}--popover-content {
+    > .#{$prefix}--popover-content {
     top: 50%;
     right: 100%;
     // Add in 0.1px to prevent rounding errors where the content is
@@ -394,7 +402,7 @@ $popover-caret-height: custom-property.get-var(
 
   .#{$prefix}--popover--left-top
     > .#{$prefix}--popover
-    .#{$prefix}--popover-content {
+    > .#{$prefix}--popover-content {
     top: -50%;
     right: 100%;
     // Add in 0.1px to prevent rounding errors where the content is
@@ -407,7 +415,7 @@ $popover-caret-height: custom-property.get-var(
 
   .#{$prefix}--popover--left-bottom
     > .#{$prefix}--popover
-    .#{$prefix}--popover-content {
+    > .#{$prefix}--popover-content {
     right: 100%;
     bottom: -50%;
     // Add in 0.1px to prevent rounding errors where the content is
@@ -421,13 +429,13 @@ $popover-caret-height: custom-property.get-var(
   // Popover hover area placement
   .#{$prefix}--popover--left
     > .#{$prefix}--popover
-    .#{$prefix}--popover-content::before,
+    > .#{$prefix}--popover-content::before,
   .#{$prefix}--popover--left-top
     > .#{$prefix}--popover
-    .#{$prefix}--popover-content::before,
+    > .#{$prefix}--popover-content::before,
   .#{$prefix}--popover--left-bottom
     > .#{$prefix}--popover
-    .#{$prefix}--popover-content::before {
+    > .#{$prefix}--popover-content::before {
     top: 0;
     right: 0;
     bottom: 0;
@@ -436,13 +444,15 @@ $popover-caret-height: custom-property.get-var(
   }
 
   // Caret placement
-  .#{$prefix}--popover--left > .#{$prefix}--popover .#{$prefix}--popover-caret,
+  .#{$prefix}--popover--left
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-caret,
   .#{$prefix}--popover--left-top
     > .#{$prefix}--popover
-    .#{$prefix}--popover-caret,
+    > .#{$prefix}--popover-caret,
   .#{$prefix}--popover--left-bottom
     > .#{$prefix}--popover
-    .#{$prefix}--popover-caret {
+    > .#{$prefix}--popover-caret {
     top: 50%;
     right: 100%;
     width: $popover-caret-height;
@@ -456,7 +466,7 @@ $popover-caret-height: custom-property.get-var(
   //-----------------------------------------------------------------------------
   .#{$prefix}--popover--tab-tip
     > .#{$prefix}--popover
-    .#{$prefix}--popover-content {
+    > .#{$prefix}--popover-content {
     border-radius: 0;
   }
 
@@ -469,8 +479,8 @@ $popover-caret-height: custom-property.get-var(
 
     position: relative;
     display: inline-flex;
-    width: rem(32px);
-    height: rem(32px);
+    width: convert.to-rem(32px);
+    height: convert.to-rem(32px);
     align-items: center;
     justify-content: center;
 

package/scss/components/progress-bar/_progress-bar.scss

@@ -11,7 +11,7 @@
 @use '../../spacing' as *;
 @use '../../theme' as *;
 @use '../../type' as *;
-@use '../../utilities/convert' as *;
+@use '../../utilities/convert';
 @use '../../utilities/visually-hidden' as *;
 @use '../../utilities/layout';
 
@@ -27,7 +27,7 @@
     @include type-style('body-compact-01');
 
     display: flex;
-    min-width: rem(48px);
+    min-width: convert.to-rem(48px);
     justify-content: space-between;
     color: $text-primary;
     margin-block-end: $spacing-03;
@@ -42,17 +42,17 @@
   .#{$prefix}--progress-bar__track {
     position: relative;
     width: 100%;
-    min-width: rem(48px);
-    height: rem(8px);
+    min-width: convert.to-rem(48px);
+    height: convert.to-rem(8px);
     background-color: $layer;
   }
 
   .#{$prefix}--progress-bar--big .#{$prefix}--progress-bar__track {
-    height: rem(8px);
+    height: convert.to-rem(8px);
   }
 
   .#{$prefix}--progress-bar--small .#{$prefix}--progress-bar__track {
-    height: rem(4px);
+    height: convert.to-rem(4px);
   }
 
   .#{$prefix}--progress-bar__bar {

package/scss/components/progress-indicator/_progress-indicator.scss

@@ -13,7 +13,7 @@
 @use '../../theme' as *;
 @use '../../type' as *;
 @use '../../utilities/focus-outline' as *;
-@use '../../utilities/convert' as *;
+@use '../../utilities/convert';
 @use '../../utilities/skeleton' as *;
 @use '../../utilities/button-reset';
 @use '../../utilities/component-reset';
@@ -39,7 +39,7 @@ $progress-indicator-bar-width: 1px inset transparent !default;
     position: relative;
     display: inline-flex;
     overflow: visible;
-    width: rem(128px);
+    width: convert.to-rem(128px);
     min-width: 7rem;
     flex-direction: row;
 
@@ -56,14 +56,14 @@ $progress-indicator-bar-width: 1px inset transparent !default;
   .#{$prefix}--progress-line {
     position: absolute;
     left: 0;
-    width: rem(128px);
+    width: convert.to-rem(128px);
     height: 2px;
     border: $progress-indicator-bar-width;
   }
 
   .#{$prefix}--progress--space-equal .#{$prefix}--progress-line {
     width: 100%;
-    min-width: rem(128px);
+    min-width: convert.to-rem(128px);
   }
 
   .#{$prefix}--progress-step svg {
@@ -72,7 +72,7 @@ $progress-indicator-bar-width: 1px inset transparent !default;
     width: $spacing-05;
     height: $spacing-05;
     flex-shrink: 0;
-    margin: rem(10px) $spacing-03 0 0;
+    margin: convert.to-rem(10px) $spacing-03 0 0;
     border-radius: 50%;
     fill: $interactive;
   }
@@ -85,7 +85,7 @@ $progress-indicator-bar-width: 1px inset transparent !default;
     @include type-style('body-compact-01');
 
     overflow: hidden;
-    max-width: rem(88px);
+    max-width: convert.to-rem(88px);
     margin: $spacing-03 0 0 0;
     color: $text-primary;
     line-height: 1.45;
@@ -101,7 +101,7 @@ $progress-indicator-bar-width: 1px inset transparent !default;
   }
 
   .#{$prefix}--progress-label:hover {
-    box-shadow: 0 rem(1px) $link-primary-hover;
+    box-shadow: 0 convert.to-rem(1px) $link-primary-hover;
     color: $link-primary-hover;
     cursor: pointer;
   }
@@ -119,10 +119,10 @@ $progress-indicator-bar-width: 1px inset transparent !default;
     }
     &:focus-visible .#{$prefix}--progress-label {
       color: $focus;
-      outline: rem(1px) solid $focus;
+      outline: convert.to-rem(1px) solid $focus;
     }
     .#{$prefix}--progress-label:active {
-      box-shadow: 0 rem(1px) 0 0 $text-primary;
+      box-shadow: 0 convert.to-rem(1px) 0 0 $text-primary;
       color: $text-primary;
     }
   }
@@ -134,7 +134,7 @@ $progress-indicator-bar-width: 1px inset transparent !default;
   }
 
   .#{$prefix}--progress-step .#{$prefix}--tooltip .#{$prefix}--tooltip__caret {
-    margin-left: rem(10px);
+    margin-left: convert.to-rem(10px);
   }
 
   .#{$prefix}--tooltip__text {
@@ -148,13 +148,13 @@ $progress-indicator-bar-width: 1px inset transparent !default;
     @include type-style('body-01');
 
     display: block;
-    width: rem(125px);
+    width: convert.to-rem(125px);
 
-    min-width: rem(115px);
+    min-width: convert.to-rem(115px);
     min-height: $spacing-06;
     padding: $spacing-03 $spacing-05;
-    margin-top: rem(40px);
-    margin-left: rem(22px);
+    margin-top: convert.to-rem(40px);
+    margin-left: convert.to-rem(22px);
     color: $text-inverse;
     visibility: hidden;
   }
@@ -163,7 +163,7 @@ $progress-indicator-bar-width: 1px inset transparent !default;
   .#{$prefix}--progress-step .#{$prefix}--tooltip_multi {
     @include type-style('body-01');
 
-    width: rem(150px);
+    width: convert.to-rem(150px);
     height: auto;
     color: $text-inverse;
   }
@@ -174,7 +174,7 @@ $progress-indicator-bar-width: 1px inset transparent !default;
 
     position: absolute;
     left: 0;
-    margin-top: rem(28px);
+    margin-top: convert.to-rem(28px);
     margin-left: $spacing-06;
     color: $text-secondary;
     text-align: start;
@@ -228,7 +228,7 @@ $progress-indicator-bar-width: 1px inset transparent !default;
 
   .#{$prefix}--progress-step-button--unclickable
     .#{$prefix}--tooltip__label:hover {
-    box-shadow: 0 rem(1px) $link-primary;
+    box-shadow: 0 convert.to-rem(1px) $link-primary;
     color: $link-primary;
     cursor: pointer;
   }
@@ -270,8 +270,8 @@ $progress-indicator-bar-width: 1px inset transparent !default;
   .#{$prefix}--progress.#{$prefix}--skeleton .#{$prefix}--progress-label {
     @include skeleton;
 
-    width: rem(40px);
-    height: rem(14px);
+    width: convert.to-rem(40px);
+    height: convert.to-rem(14px);
     margin-top: 0.625rem;
   }
 
@@ -305,13 +305,13 @@ $progress-indicator-bar-width: 1px inset transparent !default;
   .#{$prefix}--progress--vertical .#{$prefix}--progress-step-button svg {
     display: inline-block;
     // 1px top margin based on visual review
-    margin: rem(1px) $spacing-03 0;
+    margin: convert.to-rem(1px) $spacing-03 0;
   }
 
   .#{$prefix}--progress--vertical .#{$prefix}--progress-label {
     display: inline-block;
     width: initial;
-    max-width: rem(160px);
+    max-width: convert.to-rem(160px);
     margin: 0;
     vertical-align: top;
     white-space: initial;