@carbon/ibm-products-styles 2.55.0-rc.0 → 2.56.0-rc.0

package/scss/components/Coachmark/_coachmark-overlay.scss

@@ -16,9 +16,9 @@
 @use '../../global/styles/project-settings' as c4p-settings;
 @use '../../global/styles/mixins';
 @use '@carbon/styles/scss/spacing' as *;
-@use '@carbon/react/scss/theme' as *;
+@use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/type';
-@use '@carbon/react/scss/colors' as *;
+@use '@carbon/styles/scss/colors' as *;
 @use '@carbon/styles/scss/components/button/tokens' as *;
 @use '@carbon/styles/scss/motion' as *;
 // Define all component styles in a mixin which is then exported using
@@ -33,18 +33,18 @@ $draghandle-btn-class: #{$block-class}__handle;
 .#{$block-class} {
   position: absolute;
   z-index: 5901;
-  width: 18rem;
   border-radius: $spacing-01;
   background-color: $background-inverse;
   color: $text-inverse;
+  inline-size: 18rem;
+
+  visibility: hidden;
   $caret-height: calc(
     $spacing-03 - $spacing-01
   ); // from the "peak" of the pyramid to its "base"
   $caret-center: $caret-height; // use "center" for left-right calculations, and "height" for top-bottom calculations
   $distance-offset: $spacing-06; // see also ./utils/constants.js > distanceOffset
 
-  visibility: hidden;
-
   &--tooltip {
     position: initial;
     transform: none !important;
@@ -52,8 +52,8 @@ $draghandle-btn-class: #{$block-class}__handle;
 
   &--fixed {
     position: fixed;
-    right: $spacing-05;
-    bottom: 0;
+    inset-block-end: 0;
+    inset-inline-end: $spacing-05;
     transform: translateY(100%);
 
     transition: transform $duration-moderate-02 motion(exit, productive);
@@ -139,8 +139,8 @@ $draghandle-btn-class: #{$block-class}__handle;
 
   // ANIMATED MEDIA
   &__element-stepped-media {
-    height: calc($spacing-07 + $spacing-12); // 32 + 96 = 128
-    margin-bottom: $spacing-05;
+    block-size: calc($spacing-07 + $spacing-12); // 32 + 96 = 128
+    margin-block-end: $spacing-05;
   }
 
   // BODY
@@ -156,11 +156,11 @@ $draghandle-btn-class: #{$block-class}__handle;
     // CAROUSEL ELEMENTS
     #{$block-class}-element {
       display: block;
-      max-width: 100%;
       flex: 0 0 100%;
+      max-inline-size: 100%;
 
       #{$block-class}-element__content {
-        padding-bottom: $spacing-05;
+        padding-block-end: $spacing-05;
       }
 
       #{$block-class}-element__title > div {
@@ -182,15 +182,15 @@ $draghandle-btn-class: #{$block-class}__handle;
     padding: $spacing-02 0 0 $spacing-03;
     border: 0;
     background-color: transparent;
-    text-align: left;
+    text-align: start;
 
     &::before {
       position: absolute;
-      top: $spacing-01;
-      left: $spacing-01;
-      width: calc($spacing-06 + $spacing-01);
-      height: calc($spacing-06 + $spacing-01);
+      block-size: calc($spacing-06 + $spacing-01);
       content: '';
+      inline-size: calc($spacing-06 + $spacing-01);
+      inset-block-start: $spacing-01;
+      inset-inline-start: $spacing-01;
     }
 
     &:hover {
@@ -209,15 +209,15 @@ $draghandle-btn-class: #{$block-class}__handle;
   }
 
   &--close-btn-container {
-    width: $spacing-07;
-    height: $spacing-07;
-    margin-left: auto !important;
+    block-size: $spacing-07;
+    inline-size: $spacing-07;
+    margin-inline-start: auto !important;
   }
 
   &--close-btn {
-    width: $spacing-07;
-    height: $spacing-07;
-    margin-left: auto !important;
+    block-size: $spacing-07;
+    inline-size: $spacing-07;
+    margin-inline-start: auto !important;
 
     svg > path {
       margin: 0;
@@ -269,7 +269,8 @@ $draghandle-btn-class: #{$block-class}__handle;
         }
 
         &:focus {
-          box-shadow: inset 0 0 0 1px $background-inverse,
+          box-shadow:
+            inset 0 0 0 1px $background-inverse,
             inset 0 0 0 $spacing-01 $white-0;
         }
       }
@@ -292,7 +293,8 @@ $draghandle-btn-class: #{$block-class}__handle;
       }
 
       &:focus {
-        box-shadow: inset 0 0 0 1px $background-inverse,
+        box-shadow:
+          inset 0 0 0 1px $background-inverse,
           inset 0 0 0 $spacing-01 $white-0;
       }
     }
@@ -320,7 +322,8 @@ $draghandle-btn-class: #{$block-class}__handle;
       .#{c4p-settings.$carbon-prefix}--btn--primary {
         &:focus {
           background-color: $button-primary-active;
-          box-shadow: inset 0 0 0 $spacing-01 $button-primary,
+          box-shadow:
+            inset 0 0 0 $spacing-01 $button-primary,
             inset 0 0 0 to-rem(3px) $button-tertiary;
         }
       }
@@ -337,7 +340,9 @@ $draghandle-btn-class: #{$block-class}__handle;
         }
 
         &:focus {
-          box-shadow: inset 0 0 0 1px $blue-60, inset 0 0 0 $spacing-01 $white-0;
+          box-shadow:
+            inset 0 0 0 1px $blue-60,
+            inset 0 0 0 $spacing-01 $white-0;
         }
       }
     }
@@ -353,7 +358,9 @@ $draghandle-btn-class: #{$block-class}__handle;
       border-color: transparent;
 
       &:focus {
-        box-shadow: inset 0 0 0 1px $blue-60, inset 0 0 0 $spacing-01 $white-0;
+        box-shadow:
+          inset 0 0 0 1px $blue-60,
+          inset 0 0 0 $spacing-01 $white-0;
       }
 
       &:active {

package/scss/components/Coachmark/_coachmark-tagline.scss

@@ -13,10 +13,10 @@
 @use '../../global/styles/project-settings' as c4p-settings;
 @use '../../global/styles/mixins';
 @use '@carbon/styles/scss/spacing' as *;
-@use '@carbon/react/scss/motion' as *;
+@use '@carbon/styles/scss/motion' as *;
 @use '@carbon/styles/scss/type';
-@use '@carbon/react/scss/colors' as *;
-@use '@carbon/react/scss/theme' as *;
+@use '@carbon/styles/scss/colors' as *;
+@use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/components/button/tokens' as *;
 // Define all component styles in a mixin which is then exported using
 // the Carbon import-once mechanism.
@@ -27,16 +27,16 @@ $block-class: #{c4p-settings.$pkg-prefix}--coachmark-tagline;
 .#{$block-class} {
   position: fixed;
   z-index: 1000;
-  right: $spacing-05;
-  bottom: 0;
   display: grid;
   overflow: hidden;
-  width: 18rem;
   border-radius: $spacing-01 $spacing-01 0 0;
   background: $purple-70;
   background-image: linear-gradient(90deg, $blue-90 0%, $purple-70 100%);
   color: $white-0 !important;
   grid-template-columns: [cta-col] auto [close-btn-col] $spacing-08;
+  inline-size: 18rem;
+  inset-block-end: 0;
+  inset-inline-end: $spacing-05;
   opacity: 1;
   // stylelint-disable-next-line carbon/motion-duration-use
   transition: opacity $duration-moderate-02 motion(exit, productive) 300ms;
@@ -87,11 +87,13 @@ $block-class: #{c4p-settings.$pkg-prefix}--coachmark-tagline;
     background: transparent;
     color: $white-0 !important;
     grid-template-columns: [icon-col] $spacing-07 [body-col] auto;
-    text-align: left;
+    text-align: start;
     @include type.type-style('body-short-01');
 
     &:focus {
-      box-shadow: inset 0 0 0 3px $purple-70, inset 0 0 0 $spacing-02 $white-0;
+      box-shadow:
+        inset 0 0 0 3px $purple-70,
+        inset 0 0 0 $spacing-02 $white-0;
       outline: 1px solid transparent;
     }
 
@@ -105,18 +107,18 @@ $block-class: #{c4p-settings.$pkg-prefix}--coachmark-tagline;
   }
 
   &--close-btn-container {
-    width: $spacing-07;
-    height: $spacing-07;
-    margin-left: auto;
+    block-size: $spacing-07;
+    inline-size: $spacing-07;
+    margin-inline-start: auto;
   }
 
   &--close-btn {
-    width: $spacing-07;
-    height: $spacing-07;
     border-color: transparent !important;
     border-radius: 0;
-    margin-left: auto !important;
+    block-size: $spacing-07;
     color: $white-0;
+    inline-size: $spacing-07;
+    margin-inline-start: auto !important;
     outline: 1px solid transparent;
 
     &:active {
@@ -124,7 +126,8 @@ $block-class: #{c4p-settings.$pkg-prefix}--coachmark-tagline;
     }
 
     &:focus {
-      box-shadow: inset 0 0 0 1px $background-inverse,
+      box-shadow:
+        inset 0 0 0 1px $background-inverse,
         inset 0 0 0 $spacing-01 $white-0 !important;
     }
 

package/scss/components/Coachmark/_coachmark.scss

@@ -18,7 +18,7 @@
 // Other Carbon settings if needed
 // TODO: @use '@carbon/styles/scss/grid';
 // or
-// TODO: @use '@carbon/react/scss/grid';
+// TODO: @use '@carbon/styles/scss/grid';
 
 // Coachmark uses the following Carbon for IBM Products components:
 // TODO: @use(s) of IBM Products component styles used by Coachmark

package/scss/components/CoachmarkBeacon/_coachmark-beacon.scss

@@ -12,15 +12,15 @@
 @use '../../global/styles/project-settings' as c4p-settings;
 @use '../../global/styles/mixins';
 @use '@carbon/styles/scss/spacing' as *;
-@use '@carbon/react/scss/colors' as *;
-@use '@carbon/react/scss/theme' as *;
+@use '@carbon/styles/scss/colors' as *;
+@use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/type';
 @use '@carbon/styles/scss/components/button/tokens' as *;
 @use '@carbon/styles/scss/motion' as *;
 // Other Carbon settings if needed
 // TODO: @use '@carbon/styles/scss/grid';
 // or
-// TODO: @use '@carbon/react/scss/grid';
+// TODO: @use '@carbon/styles/scss/grid';
 
 // CoachmarkBeacon uses the following Carbon for IBM Products components:
 // TODO: @use(s) of IBM Products component styles used by CoachmarkBeacon
@@ -39,14 +39,14 @@ $block-class: #{c4p-settings.$pkg-prefix}--coachmark-beacon;
       // the blue dot
       &::after {
         position: absolute;
-        top: calc($spacing-01 + $spacing-03);
-        left: calc($spacing-01 + $spacing-03);
-        width: $spacing-04;
-        height: $spacing-04;
         border-radius: 50%;
         /* stylelint-disable-next-line carbon/theme-use */
         background-color: $blue-50;
+        block-size: $spacing-04;
         content: '';
+        inline-size: $spacing-04;
+        inset-block-start: calc($spacing-01 + $spacing-03);
+        inset-inline-start: calc($spacing-01 + $spacing-03);
       }
 
       &:focus {
@@ -54,13 +54,13 @@ $block-class: #{c4p-settings.$pkg-prefix}--coachmark-beacon;
 
         &::before {
           position: absolute;
-          top: 7px;
-          left: 7px;
           display: block;
-          width: 18px;
-          height: 18px;
           border-radius: 100%;
+          block-size: 18px;
           content: '';
+          inline-size: 18px;
+          inset-block-start: 7px;
+          inset-inline-start: 7px;
           /* stylelint-disable-next-line carbon/theme-use */
           outline: $spacing-01 $focus solid;
         }
@@ -70,13 +70,13 @@ $block-class: #{c4p-settings.$pkg-prefix}--coachmark-beacon;
   .#{$block-class}__target {
     // the hit area
     display: flex;
-    width: $spacing-07;
-    height: $spacing-07;
     padding: 0;
     border: none;
     border-radius: 50%;
     background-color: transparent;
+    block-size: $spacing-07;
     cursor: pointer;
+    inline-size: $spacing-07;
 
     &[aria-expanded='true'] {
       circle {
@@ -88,10 +88,10 @@ $block-class: #{c4p-settings.$pkg-prefix}--coachmark-beacon;
   &__center {
     position: absolute;
     z-index: 6900;
-    top: calc(($spacing-06 - $spacing-01) * -1);
-    left: calc(($spacing-06 - $spacing-01) * -1);
-    width: $spacing-11;
-    height: $spacing-11;
+    block-size: $spacing-11;
+    inline-size: $spacing-11;
+    inset-block-start: calc(($spacing-06 - $spacing-01) * -1);
+    inset-inline-start: calc(($spacing-06 - $spacing-01) * -1);
     pointer-events: none;
 
     circle {

package/scss/components/CoachmarkButton/_coachmark-button.scss

@@ -12,7 +12,7 @@
 // Other Carbon settings if needed
 // TODO: @use '@carbon/styles/scss/grid';
 // or
-// TODO: @use '@carbon/react/scss/grid';
+// TODO: @use '@carbon/styles/scss/grid';
 
 // CoachmarkButton uses the following Carbon for IBM Products components:
 // TODO: @use(s) of IBM Products component styles used by CoachmarkButton

package/scss/components/CoachmarkFixed/_coachmark-fixed.scss

@@ -12,7 +12,7 @@
 // Other Carbon settings if needed
 // TODO: @use '@carbon/styles/scss/grid';
 // or
-// TODO: @use '@carbon/react/scss/grid';
+// TODO: @use '@carbon/styles/scss/grid';
 
 // CoachmarkFixed uses the following Carbon for IBM Products components:
 // TODO: @use(s) of IBM Products component styles used by CoachmarkFixed

package/scss/components/CoachmarkOverlayElement/_coachmark-overlay-element.scss

@@ -10,11 +10,11 @@
 @use '../../global/styles/project-settings' as c4p-settings;
 @use '../../global/styles/mixins';
 @use '@carbon/styles/scss/spacing' as *;
-@use '@carbon/react/scss/type' as *;
+@use '@carbon/styles/scss/type' as *;
 // Other Carbon settings if needed
 // TODO: @use '@carbon/styles/scss/grid';
 // or
-// TODO: @use '@carbon/react/scss/grid';
+// TODO: @use '@carbon/styles/scss/grid';
 
 // CoachmarkOverlayElement uses the following Carbon for IBM Products components:
 // TODO: @use(s) of IBM Products component styles used by CoachmarkOverlayElement
@@ -26,7 +26,7 @@ $carousel-item-class: #{c4p-settings.$pkg-prefix}--carousel__item;
   padding: $spacing-01 $spacing-05 0;
 
   &__content {
-    padding-bottom: $spacing-05;
+    padding-block-end: $spacing-05;
   }
 
   &__title {
@@ -40,13 +40,13 @@ $carousel-item-class: #{c4p-settings.$pkg-prefix}--carousel__item;
   }
 
   &__button {
-    margin-bottom: 0;
+    margin-block-end: 0;
   }
 }
 .#{$carousel-item-class} {
   .#{$block-class} {
     &__button {
-      margin-bottom: $spacing-05;
+      margin-block-end: $spacing-05;
     }
   }
 }

package/scss/components/CoachmarkOverlayElements/_coachmark-overlay-elements.scss

@@ -17,7 +17,7 @@
 // Other Carbon settings if needed
 // TODO: @use '@carbon/styles/scss/grid';
 // or
-// TODO: @use '@carbon/react/scss/grid';
+// TODO: @use '@carbon/styles/scss/grid';
 
 // CoachmarkOverlayElements uses the following Carbon for IBM Products components:
 @use '../Carousel/carousel';
@@ -28,8 +28,8 @@ $block-class: #{c4p-settings.$pkg-prefix}--coachmark-overlay-elements;
 .#{$block-class} {
   &__element-stepped-media {
     /* stylelint-disable-next-line function-no-unknown -- to-rem carbon replacement for rem */
-    height: to-rem(128px);
-    margin-bottom: $spacing-05;
+    block-size: to-rem(128px);
+    margin-block-end: $spacing-05;
   }
 
   &__footer {
@@ -40,8 +40,8 @@ $block-class: #{c4p-settings.$pkg-prefix}--coachmark-overlay-elements;
   }
 
   &--controls-progress {
-    margin-right: auto;
     justify-self: flex-start;
+    margin-inline-end: auto;
     @include type.type-style('helper-text-01');
   }
 }

package/scss/components/CoachmarkStack/_coachmark-stack.scss

@@ -11,15 +11,15 @@
 @use '../../global/styles/project-settings' as c4p-settings;
 @use '../../global/styles/mixins';
 @use '@carbon/styles/scss/spacing' as *;
-@use '@carbon/react/scss/motion' as *;
-@use '@carbon/react/scss/colors' as *;
-@use '@carbon/react/scss/theme' as *;
+@use '@carbon/styles/scss/motion' as *;
+@use '@carbon/styles/scss/colors' as *;
+@use '@carbon/styles/scss/theme' as *;
 @use '@carbon/layout/scss/convert';
 @use '@carbon/styles/scss/components/button/tokens' as *;
 // Other Carbon settings if needed
 // TODO: @use '@carbon/styles/scss/grid';
 // or
-// TODO: @use '@carbon/react/scss/grid';
+// TODO: @use '@carbon/styles/scss/grid';
 
 // CoachmarkStack uses the following Carbon for IBM Products components:
 // TODO: @use(s) of IBM Products component styles used by CoachmarkStack
@@ -35,14 +35,14 @@ $stack-home-class: #{c4p-settings.$pkg-prefix}--coachmark-stacked-home;
 
   position: fixed;
   z-index: 5901;
-  right: $spacing-05;
-  bottom: -100%;
+  inset-block-end: -100%;
+  inset-inline-end: $spacing-05;
   //opacity: 0;
   transform: translateY(100%);
   visibility: hidden;
 
   &--is-mounted {
-    bottom: 0;
+    inset-block-end: 0;
     /* stylelint-disable-next-line carbon/motion-easing-use, carbon/motion-duration-use */
     transition: $duration-moderate-02 motion(exit, productive);
     @media (prefers-reduced-motion) {
@@ -58,8 +58,8 @@ $stack-home-class: #{c4p-settings.$pkg-prefix}--coachmark-stacked-home;
 
   // Stack the level-one item behind the level-two item.
   &--is-stacked {
-    bottom: 0;
     overflow: hidden;
+    inset-block-end: 0;
     pointer-events: none;
     /* stylelint-disable-next-line function-no-unknown -- to-rem carbon replacement for rem */
     transform: perspective(convert.to-rem(144px))
@@ -87,11 +87,11 @@ $stack-home-class: #{c4p-settings.$pkg-prefix}--coachmark-stacked-home;
 // SPECIFIC TO THE HOME ELEMENT
 .#{$stack-home-class} {
   &__nav-links {
-    margin-top: $spacing-04;
-    margin-left: calc(-1 * $spacing-05);
+    margin-block-start: $spacing-04;
+    margin-inline-start: calc(-1 * $spacing-05);
   }
 
   &__icon-idea {
-    margin-bottom: $spacing-03;
+    margin-block-end: $spacing-03;
   }
 }

package/scss/components/ComboButton/_combo-button.scss

@@ -18,16 +18,20 @@
 .#{c4p-settings.$pkg-prefix}--combo-button__action {
   display: block;
   overflow-x: hidden;
+  @supports (overflow-inline: hidden) {
+    overflow-inline: hidden;
+  }
+
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 .#{c4p-settings.$pkg-prefix}--combo-button
   .#{c4p-settings.$pkg-prefix}--combo-button__overflow-menu {
-  width: $spacing-09;
-  height: $spacing-09;
-  border-left: $spacing-01 solid $border-subtle-01;
   background-color: $background-brand;
+  block-size: $spacing-09;
+  border-inline-start: $spacing-01 solid $border-subtle-01;
+  inline-size: $spacing-09;
 }
 
 .#{c4p-settings.$pkg-prefix}--combo-button
@@ -43,8 +47,8 @@
 
 .#{c4p-settings.$pkg-prefix}--combo-button
   .cds--overflow-menu--flip.cds--overflow-menu-options[data-floating-menu-direction='bottom']::after {
-  width: 0;
-  height: 0;
+  block-size: 0;
+  inline-size: 0;
 }
 
 .#{c4p-settings.$pkg-prefix}--combo-button__overflow-menu.#{c4p-settings.$carbon-prefix}--overflow-menu:active {
@@ -57,8 +61,8 @@
 }
 
 .#{c4p-settings.$pkg-prefix}--combo-button__overflow-menu__list.#{c4p-settings.$carbon-prefix}--overflow-menu-options {
-  left: 0;
-  width: 100%;
+  inline-size: 100%;
+  inset-inline-start: 0;
 }
 
 .#{c4p-settings.$pkg-prefix}--combo-button__overflow-menu__list:after {
@@ -66,9 +70,9 @@
 }
 
 .#{c4p-settings.$pkg-prefix}--combo-button__overflow-menu__item.#{c4p-settings.$carbon-prefix}--overflow-menu-options__btn {
-  max-width: 100%;
+  max-inline-size: 100%;
 }
 
 .#{c4p-settings.$pkg-prefix}--combo-button__overflow-menu__item__icon {
-  margin-left: auto;
+  margin-inline-start: auto;
 }

package/scss/components/ConditionBuilder/_condition-builder.scss

@@ -8,15 +8,15 @@
 // Standard imports.
 @use '../../global/styles/project-settings' as c4p-settings;
 @use '../../global/styles/mixins';
-@use '@carbon/react/scss/spacing' as *;
-@use '@carbon/react/scss/type' as *;
-@use '@carbon/react/scss/theme';
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/theme';
 
 @use './styles/index';
 // Other Carbon settings if needed
 // TODO: @use '@carbon/styles/scss/grid';
 // or
-// TODO: @use '@carbon/react/scss/grid';
+// TODO: @use '@carbon/styles/scss/grid';
 
 // ConditionBuilder uses the following Carbon for IBM Products components:
 // TODO: @use(s) of IBM Products component styles used by ConditionBuilder
@@ -33,18 +33,18 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
   flex-flow: row wrap;
 }
 .#{$block-class}__gap {
-  margin-right: $spacing-01;
+  margin-inline-end: $spacing-01;
 }
 .#{$block-class}__gap-bottom {
-  margin-bottom: $spacing-01;
+  margin-block-end: $spacing-01;
 }
 .#{$block-class}__gap-left {
-  margin-left: $spacing-01;
+  margin-inline-start: $spacing-01;
 }
 .#{$block-class}__condition-block {
   display: flex;
-  width: fit-content;
   flex-direction: row;
+  inline-size: fit-content;
 }
 .#{$block-class}__content-container {
   display: flex;
@@ -52,8 +52,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
   row-gap: $spacing-02;
 }
 .#{$block-class}__heading {
-  margin-top: $spacing-03;
-  margin-bottom: $spacing-03;
+  margin-block: $spacing-03;
 }
 .#{$block-class}__Hierarchical
   .#{$block-class}__actions-container
@@ -61,11 +60,11 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
   flex-direction: column;
 }
 .#{$block-class}__group-separator {
-  margin-top: $spacing-02;
+  margin-block-start: $spacing-02;
 }
 .#{$block-class}__add-group,
 .#{$block-class}__group-separator {
-  width: fit-content;
+  inline-size: fit-content;
 }
 .#{$block-class}__tooltip {
   word-break: break-all;

package/scss/components/ConditionBuilder/styles/_conditionBuilderCondition.scss

@@ -5,15 +5,15 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@use '@carbon/react/scss/theme' as *;
-@use '@carbon/react/scss/spacing' as *;
-@use '@carbon/react/scss/motion' as *;
-@use '@carbon/styles/scss/components/tag' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/motion' as *;
+@use '@carbon/styles/scss/components/tag/tokens' as *;
 @use '@carbon/styles/scss/utilities/focus-outline';
 @use '../../../global/styles/project-settings' as c4p-settings;
 @use '@carbon/styles/scss/type';
 @use '@carbon/styles/scss/type' as *;
-@use '@carbon/react/scss/utilities';
+@use '@carbon/styles/scss/utilities';
 
 $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
 
@@ -56,12 +56,12 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
 .#{$block-class}__text-ellipsis {
   display: block;
   overflow: hidden;
-  max-width: $spacing-13;
+  max-inline-size: $spacing-13;
   text-overflow: ellipsis;
   text-wrap: nowrap;
 }
 .#{$block-class}__group-preview {
-  height: 0;
+  block-size: 0;
   opacity: 0;
   pointer-events: none;
   transition: all $duration-moderate-02 motion(exit, expressive);
@@ -70,7 +70,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
   }
 }
 .#{$block-class}__group-preview-animate {
-  height: auto;
+  block-size: auto;
   color: $text-secondary;
   opacity: 0.5;
   pointer-events: none;
@@ -78,13 +78,13 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
 }
 .#{$block-class}__connector--disabled {
   display: flex;
-  min-width: $spacing-10;
   background-color: $layer;
   color: $text-helper;
+  min-inline-size: $spacing-10;
   pointer-events: none;
 }
 .#{$block-class}__condition-wrapper
   > .#{$block-class}__condition-block:last-child
   > .#{$block-class}__groupConnector {
-  margin-bottom: 0;
+  margin-block-end: 0;
 }