@carbon/ibm-products 2.12.0 → 2.13.0

package/css/index-without-carbon.css

@@ -282,12 +282,12 @@
 .cds--visually-hidden {
   position: absolute;
   overflow: hidden;
-  width: 1px;
-  height: 1px;
   padding: 0;
   border: 0;
   margin: -1px;
+  block-size: 1px;
   clip: rect(0, 0, 0, 0);
+  inline-size: 1px;
   visibility: inherit;
   white-space: nowrap;
 }
@@ -329,11 +329,11 @@
   position: absolute;
   z-index: 6000;
   display: none;
-  width: max-content;
-  max-width: 23rem;
-  background-color: var(--cds-popover-background-color, var(--cds-layer));
   border-radius: var(--cds-popover-border-radius, 2px);
+  background-color: var(--cds-popover-background-color, var(--cds-layer));
   color: var(--cds-popover-text-color, var(--cds-text-primary, #161616));
+  inline-size: max-content;
+  max-inline-size: 23rem;
   pointer-events: auto;
 }
 .cds--popover-content *,
@@ -373,161 +373,227 @@
 }
 
 .cds--popover--bottom > .cds--popover > .cds--popover-content {
-  bottom: 0;
-  left: 50%;
+  inset-block-end: 0;
+  inset-inline-start: 50%;
   transform: translate(-50%, calc(100% + var(--cds-popover-offset, 0rem)));
 }
 
+[dir=rtl] .cds--popover--bottom > .cds--popover > .cds--popover-content {
+  transform: translate(50%, calc(100% + var(--cds-popover-offset, 0rem)));
+}
+
 .cds--popover--bottom-left > .cds--popover > .cds--popover-content {
-  bottom: 0;
-  left: 0;
+  inset-block-end: 0;
+  inset-inline-start: 0;
   transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(100% + var(--cds-popover-offset, 0rem)));
 }
 
+[dir=rtl] .cds--popover--bottom-left > .cds--popover > .cds--popover-content {
+  inset-inline-end: 0;
+  inset-inline-start: initial;
+}
+
 .cds--popover--bottom-right > .cds--popover > .cds--popover-content {
-  right: 0;
-  bottom: 0;
+  inset-block-end: 0;
+  inset-inline-end: 0;
   transform: translate(var(--cds-popover-offset, 0rem), calc(100% + var(--cds-popover-offset, 0rem)));
 }
 
+[dir=rtl] .cds--popover--bottom-right > .cds--popover > .cds--popover-content {
+  inset-inline-start: 0;
+}
+
 .cds--popover--bottom > .cds--popover > .cds--popover-content::before,
 .cds--popover--bottom-left > .cds--popover > .cds--popover-content::before,
 .cds--popover--bottom-right > .cds--popover > .cds--popover-content::before {
-  top: 0;
-  right: 0;
-  left: 0;
-  height: var(--cds-popover-offset, 0rem);
+  block-size: var(--cds-popover-offset, 0rem);
+  inset-block-start: 0;
+  inset-inline-end: 0;
+  inset-inline-start: 0;
   transform: translateY(-100%);
 }
 
 .cds--popover--bottom > .cds--popover > .cds--popover-caret,
 .cds--popover--bottom-left > .cds--popover > .cds--popover-caret,
 .cds--popover--bottom-right > .cds--popover > .cds--popover-caret {
-  bottom: 0;
-  left: 50%;
-  width: var(--cds-popover-caret-width, 0.75rem);
-  height: var(--cds-popover-caret-height, 0.375rem);
+  block-size: var(--cds-popover-caret-height, 0.375rem);
   clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
+  inline-size: var(--cds-popover-caret-width, 0.75rem);
+  inset-block-end: 0;
+  inset-inline-start: 50%;
   transform: translate(-50%, var(--cds-popover-offset, 0rem));
 }
 
+[dir=rtl] .cds--popover--bottom > .cds--popover > .cds--popover-caret,
+[dir=rtl] .cds--popover--bottom-left > .cds--popover > .cds--popover-caret,
+[dir=rtl] .cds--popover--bottom-right > .cds--popover > .cds--popover-caret {
+  transform: translate(50%, var(--cds-popover-offset, 0rem));
+}
+
 .cds--popover--top > .cds--popover > .cds--popover-content {
-  top: 0;
-  left: 50%;
+  inset-block-start: 0;
+  inset-inline-start: 50%;
   transform: translate(-50%, calc(-100% - var(--cds-popover-offset, 0rem)));
 }
 
+[dir=rtl] .cds--popover--top > .cds--popover > .cds--popover-content {
+  transform: translate(50%, calc(-100% - var(--cds-popover-offset, 0rem)));
+}
+
 .cds--popover--top-left > .cds--popover > .cds--popover-content {
-  top: 0;
-  left: 0;
+  inset-block-start: 0;
+  inset-inline-start: 0;
   transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(-100% - var(--cds-popover-offset, 0rem)));
 }
 
+[dir=rtl] .cds--popover--top-left > .cds--popover > .cds--popover-content {
+  inset-inline-end: 0;
+  inset-inline-start: initial;
+}
+
 .cds--popover--top-right > .cds--popover > .cds--popover-content {
-  top: 0;
-  right: 0;
+  inset-block-start: 0;
+  inset-inline-end: 0;
   transform: translate(var(--cds-popover-offset, 0rem), calc(-100% - var(--cds-popover-offset, 0rem)));
 }
 
+[dir=rtl] .cds--popover--top-right > .cds--popover > .cds--popover-content {
+  inset-inline-start: 0;
+}
+
 .cds--popover--top > .cds--popover > .cds--popover-content::before,
 .cds--popover--top-left > .cds--popover > .cds--popover-content::before,
 .cds--popover--top-right > .cds--popover > .cds--popover-content::before {
-  right: 0;
-  bottom: 0;
-  left: 0;
-  height: var(--cds-popover-offset, 0rem);
+  block-size: var(--cds-popover-offset, 0rem);
+  inset-block-end: 0;
+  inset-inline-end: 0;
+  inset-inline-start: 0;
   transform: translateY(100%);
 }
 
 .cds--popover--top > .cds--popover > .cds--popover-caret,
 .cds--popover--top-left > .cds--popover > .cds--popover-caret,
 .cds--popover--top-right > .cds--popover > .cds--popover-caret {
-  top: 0;
-  left: 50%;
-  width: var(--cds-popover-caret-width, 0.75rem);
-  height: var(--cds-popover-caret-height, 0.375rem);
+  block-size: var(--cds-popover-caret-height, 0.375rem);
   clip-path: polygon(0% 0%, 50% 100%, 100% 0%);
+  inline-size: var(--cds-popover-caret-width, 0.75rem);
+  inset-block-start: 0;
+  inset-inline-start: 50%;
   transform: translate(-50%, calc(-1 * var(--cds-popover-offset, 0rem)));
 }
 
+[dir=rtl] .cds--popover--top > .cds--popover > .cds--popover-caret,
+[dir=rtl] .cds--popover--top-left > .cds--popover > .cds--popover-caret,
+[dir=rtl] .cds--popover--top-right > .cds--popover > .cds--popover-caret {
+  transform: translate(50%, calc(-1 * var(--cds-popover-offset, 0rem)));
+}
+
 .cds--popover--right > .cds--popover > .cds--popover-content {
-  top: 50%;
-  left: 100%;
+  inset-block-start: 50%;
+  inset-inline-start: 100%;
   transform: translate(var(--cds-popover-offset, 0rem), -50%);
 }
 
 .cds--popover--right-top > .cds--popover > .cds--popover-content {
-  top: 50%;
-  left: 100%;
+  inset-block-start: 50%;
+  inset-inline-start: 100%;
   transform: translate(var(--cds-popover-offset, 0rem), calc(0.5 * var(--cds-popover-offset, 0rem) * -1 - 16px));
 }
 
 .cds--popover--right-bottom > .cds--popover > .cds--popover-content {
-  bottom: 50%;
-  left: 100%;
+  inset-block-end: 50%;
+  inset-inline-start: 100%;
   transform: translate(var(--cds-popover-offset, 0rem), calc(0.5 * var(--cds-popover-offset, 0rem) + 16px));
 }
 
+[dir=rtl] .cds--popover--right > .cds--popover > .cds--popover-content,
+[dir=rtl] .cds--popover--right-bottom > .cds--popover > .cds--popover-content,
+[dir=rtl] .cds--popover--right-top > .cds--popover > .cds--popover-content {
+  inset-inline-end: 100%;
+  inset-inline-start: initial;
+}
+
 .cds--popover--right > .cds--popover > .cds--popover-content::before,
 .cds--popover--right-top > .cds--popover > .cds--popover-content::before,
 .cds--popover--right-bottom > .cds--popover > .cds--popover-content::before {
-  top: 0;
-  bottom: 0;
-  left: 0;
-  width: var(--cds-popover-offset, 0rem);
+  inline-size: var(--cds-popover-offset, 0rem);
+  inset-block-end: 0;
+  inset-block-start: 0;
+  inset-inline-start: 0;
   transform: translateX(-100%);
 }
 
 .cds--popover--right > .cds--popover > .cds--popover-caret,
 .cds--popover--right-top > .cds--popover > .cds--popover-caret,
 .cds--popover--right-bottom > .cds--popover > .cds--popover-caret {
-  top: 50%;
-  left: 100%;
-  width: var(--cds-popover-caret-height, 0.375rem);
-  height: var(--cds-popover-caret-width, 0.75rem);
+  block-size: var(--cds-popover-caret-width, 0.75rem);
   clip-path: polygon(0% 50%, 100% 0%, 100% 100%);
+  inline-size: var(--cds-popover-caret-height, 0.375rem);
+  inset-block-start: 50%;
+  inset-inline-start: 100%;
   transform: translate(calc(var(--cds-popover-offset, 0rem) - 100%), -50%);
 }
 
+[dir=rtl] .cds--popover--right > .cds--popover > .cds--popover-caret,
+[dir=rtl] .cds--popover--right-top > .cds--popover > .cds--popover-caret,
+[dir=rtl] .cds--popover--right-bottom > .cds--popover > .cds--popover-caret {
+  inset-inline-end: 100%;
+  inset-inline-start: initial;
+}
+
 .cds--popover--left > .cds--popover > .cds--popover-content {
-  top: 50%;
-  right: 100%;
+  inset-block-start: 50%;
+  inset-inline-end: 100%;
   transform: translate(calc(-1 * var(--cds-popover-offset, 0rem) + 0.1px), -50%);
 }
 
 .cds--popover--left-top > .cds--popover > .cds--popover-content {
-  top: -50%;
-  right: 100%;
+  inset-block-start: -50%;
+  inset-inline-end: 100%;
   transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(-0.5 * var(--cds-popover-offset, 0rem) + 16px));
 }
 
 .cds--popover--left-bottom > .cds--popover > .cds--popover-content {
-  right: 100%;
-  bottom: -50%;
+  inset-block-end: -50%;
+  inset-inline-end: 100%;
   transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(0.5 * var(--cds-popover-offset, 0rem) - 16px));
 }
 
+[dir=rtl] .cds--popover--left > .cds--popover > .cds--popover-content,
+[dir=rtl] .cds--popover--left-bottom > .cds--popover > .cds--popover-content,
+[dir=rtl] .cds--popover--left-top > .cds--popover > .cds--popover-content {
+  inset-inline-end: initial;
+  inset-inline-start: 100%;
+}
+
 .cds--popover--left > .cds--popover > .cds--popover-content::before,
 .cds--popover--left-top > .cds--popover > .cds--popover-content::before,
 .cds--popover--left-bottom > .cds--popover > .cds--popover-content::before {
-  top: 0;
-  right: 0;
-  bottom: 0;
-  width: var(--cds-popover-offset, 0rem);
+  inline-size: var(--cds-popover-offset, 0rem);
+  inset-block-end: 0;
+  inset-block-start: 0;
+  inset-inline-end: 0;
   transform: translateX(100%);
 }
 
 .cds--popover--left > .cds--popover > .cds--popover-caret,
 .cds--popover--left-top > .cds--popover > .cds--popover-caret,
 .cds--popover--left-bottom > .cds--popover > .cds--popover-caret {
-  top: 50%;
-  right: 100%;
-  width: var(--cds-popover-caret-height, 0.375rem);
-  height: var(--cds-popover-caret-width, 0.75rem);
+  block-size: var(--cds-popover-caret-width, 0.75rem);
   clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
+  inline-size: var(--cds-popover-caret-height, 0.375rem);
+  inset-block-start: 50%;
+  inset-inline-end: 100%;
   transform: translate(calc(-1 * var(--cds-popover-offset, 0rem) + 100%), -50%);
 }
 
+[dir=rtl] .cds--popover--left > .cds--popover > .cds--popover-caret,
+[dir=rtl] .cds--popover--left-top > .cds--popover > .cds--popover-caret,
+[dir=rtl] .cds--popover--left-bottom > .cds--popover > .cds--popover-caret {
+  inset-inline-end: initial;
+  inset-inline-start: 100%;
+}
+
 .cds--popover--tab-tip > .cds--popover > .cds--popover-content {
   border-radius: 0;
 }
@@ -551,13 +617,13 @@
   background: none;
   cursor: pointer;
   text-align: start;
-  width: 100%;
+  inline-size: 100%;
   position: relative;
   display: inline-flex;
-  width: 2rem;
-  height: 2rem;
   align-items: center;
   justify-content: center;
+  block-size: 2rem;
+  inline-size: 2rem;
 }
 .cds--popover--tab-tip__button *,
 .cds--popover--tab-tip__button *::before,
@@ -588,11 +654,11 @@
 .cds--popover--tab-tip.cds--popover--open .cds--popover--tab-tip__button:not(:focus)::after {
   position: absolute;
   z-index: 6001;
-  bottom: 0;
-  width: 100%;
-  height: 2px;
   background: var(--cds-layer);
+  block-size: 2px;
   content: "";
+  inline-size: 100%;
+  inset-block-end: 0;
 }
 
 .cds--popover--tab-tip__button svg {
@@ -608,9 +674,9 @@
   font-weight: var(--cds-body-01-font-weight, 400);
   line-height: var(--cds-body-01-line-height, 1.42857);
   letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
-  max-width: 18rem;
   padding: var(--cds-tooltip-padding-block, 1rem) var(--cds-tooltip-padding-inline, 1rem);
   color: var(--cds-text-inverse, #ffffff);
+  max-inline-size: 18rem;
 }
 
 .cds--icon-tooltip {
@@ -642,9 +708,9 @@
   background: none;
   cursor: pointer;
   text-align: start;
-  width: 100%;
-  border-bottom: 1px dotted var(--cds-border-strong);
+  inline-size: 100%;
   border-radius: 0;
+  border-block-end: 1px dotted var(--cds-border-strong);
   color: var(--cds-text-primary, #161616);
 }
 .cds--definition-term *,
@@ -658,7 +724,7 @@
 
 .cds--definition-term:focus {
   outline: 1px solid var(--cds-focus, #0f62fe);
-  border-bottom-color: var(--cds-border-interactive, #0f62fe);
+  border-block-end-color: var(--cds-border-interactive, #0f62fe);
 }
 @media screen and (prefers-contrast) {
   .cds--definition-term:focus {
@@ -667,7 +733,7 @@
 }
 
 .cds--definition-term:hover {
-  border-bottom-color: var(--cds-border-interactive, #0f62fe);
+  border-block-end-color: var(--cds-border-interactive, #0f62fe);
 }
 
 .cds--definition-tooltip {
@@ -675,12 +741,12 @@
   font-weight: var(--cds-body-01-font-weight, 400);
   line-height: var(--cds-body-01-line-height, 1.42857);
   letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
-  max-width: 11rem;
   padding: 0.5rem 1rem;
+  max-inline-size: 11rem;
 }
 
 .cds--btn {
-  --cds-layout-size-height-local: clamp(var(--cds-layout-size-height-min), var(--cds-layout-size-height, var(--cds-layout-size-height-lg)), var(--cds-layout-size-height-max));
+  --cds-layout-size-height-local: clamp(max(var(--cds-layout-size-height-min), var(--cds-layout-size-height-sm)), var(--cds-layout-size-height, var(--cds-layout-size-height-lg)), min(var(--cds-layout-size-height-max), var(--cds-layout-size-height-2xl)));
   --cds-layout-density-padding-inline-local: clamp(var(--cds-layout-density-padding-inline-min), var(--cds-layout-density-padding-inline, var(--cds-layout-density-padding-inline-normal)), var(--cds-layout-density-padding-inline-max));
   --temp-1lh: (
     var(--cds-body-compact-01-line-height, 1.28572) * 1em
@@ -705,19 +771,19 @@
   letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
   position: relative;
   display: inline-flex;
-  width: max-content;
-  max-width: 20rem;
-  min-height: var(--cds-layout-size-height-local);
   flex-shrink: 0;
   justify-content: space-between;
-  margin: 0;
   border-radius: 0;
+  margin: 0;
   cursor: pointer;
+  inline-size: max-content;
+  max-inline-size: 20rem;
+  min-block-size: var(--cds-layout-size-height-local);
   outline: none;
   padding-block: min((var(--cds-layout-size-height-local) - var(--temp-1lh)) / 2 - 0.0625rem, var(--temp-padding-block-max));
   padding-inline-end: calc(var(--cds-layout-density-padding-inline-local) * 3 + 1rem - 0.0625rem);
   padding-inline-start: calc(var(--cds-layout-density-padding-inline-local) - 0.0625rem);
-  text-align: left;
+  text-align: start;
   text-decoration: none;
   transition: background 70ms cubic-bezier(0, 0, 0.38, 0.9), box-shadow 70ms cubic-bezier(0, 0, 0.38, 0.9), border-color 70ms cubic-bezier(0, 0, 0.38, 0.9), outline 70ms cubic-bezier(0, 0, 0.38, 0.9);
   vertical-align: top;
@@ -736,11 +802,11 @@
 }
 .cds--btn .cds--btn__icon {
   position: absolute;
-  top: min((var(--cds-layout-size-height-local) - 1rem) / 2 - 0.0625rem, var(--temp-padding-block-max));
-  right: var(--cds-layout-density-padding-inline-local);
-  width: 1rem;
-  height: 1rem;
   flex-shrink: 0;
+  block-size: 1rem;
+  inline-size: 1rem;
+  inset-block-start: min((var(--cds-layout-size-height-local) - 1rem) / 2 - 0.0625rem, var(--temp-padding-block-max));
+  inset-inline-end: var(--cds-layout-density-padding-inline-local);
   margin-block-start: 0.0625rem;
 }
 
@@ -862,7 +928,7 @@
 }
 .cds--btn--ghost .cds--btn__icon {
   position: static;
-  margin-left: 0.5rem;
+  margin-inline-start: 0.5rem;
 }
 .cds--btn--ghost:hover, .cds--btn--ghost:active {
   color: var(--cds-link-primary-hover, #0043ce);
@@ -881,15 +947,15 @@
 }
 
 .cds--btn--icon-only {
-  width: var(--cds-layout-size-height-local);
-  height: var(--cds-layout-size-height-local);
   justify-content: center;
   padding: 0;
+  block-size: var(--cds-layout-size-height-local);
+  inline-size: var(--cds-layout-size-height-local);
   padding-block-start: min((var(--cds-layout-size-height-local) - 1rem) / 2 - 0.0625rem, var(--temp-padding-block-max));
 }
 .cds--btn--icon-only > :first-child {
-  min-width: 1rem;
   margin-block-start: 0.0625rem;
+  min-inline-size: 1rem;
 }
 .cds--btn--icon-only .cds--btn__icon {
   position: static;
@@ -1016,7 +1082,7 @@
 }
 .cds--btn--danger--ghost .cds--btn__icon {
   position: static;
-  margin-left: 0.5rem;
+  margin-inline-start: 0.5rem;
 }
 .cds--btn--danger--ghost:hover, .cds--btn--danger--ghost:active {
   color: var(--cds-text-on-color, #ffffff);
@@ -1041,12 +1107,12 @@
 }
 
 .cds--btn.cds--btn--expressive .cds--btn__icon {
-  width: 1.25rem;
-  height: 1.25rem;
+  block-size: 1.25rem;
+  inline-size: 1.25rem;
 }
 
 .cds--btn-set .cds--btn.cds--btn--expressive {
-  max-width: 20rem;
+  max-inline-size: 20rem;
 }
 
 .cds--btn.cds--skeleton {
@@ -1056,7 +1122,7 @@
   background: var(--cds-skeleton-background, #e8e8e8);
   box-shadow: none;
   pointer-events: none;
-  width: 9.375rem;
+  inline-size: 9.375rem;
 }
 .cds--btn.cds--skeleton:hover, .cds--btn.cds--skeleton:focus, .cds--btn.cds--skeleton:active {
   border: none;
@@ -1065,11 +1131,11 @@
 }
 .cds--btn.cds--skeleton::before {
   position: absolute;
-  width: 100%;
-  height: 100%;
   animation: 3000ms ease-in-out skeleton infinite;
   background: var(--cds-skeleton-element, #c6c6c6);
+  block-size: 100%;
   content: "";
+  inline-size: 100%;
   will-change: transform-origin, transform, opacity;
 }
 @media (prefers-reduced-motion: reduce) {
@@ -1087,8 +1153,8 @@
 }
 
 .cds--btn-set .cds--btn {
-  width: 100%;
-  max-width: 12.25rem;
+  inline-size: 100%;
+  max-inline-size: 12.25rem;
 }
 .cds--btn-set .cds--btn:not(:focus) {
   box-shadow: -0.0625rem 0 0 0 var(--cds-button-separator, #e0e0e0);
@@ -1137,6 +1203,10 @@
   }
 }
 
+[dir=rtl] .cds--btn-set .cds--btn:not(:focus) {
+  box-shadow: 0.0625rem 0 0 0 var(--cds-button-separator, #e0e0e0);
+}
+
 .cds--copy-btn {
   position: relative;
   display: flex;
@@ -1172,25 +1242,25 @@
 .cds--copy-btn::before {
   position: absolute;
   z-index: 6000;
-  width: 0;
-  height: 0;
   border-style: solid;
+  block-size: 0;
   content: "";
+  inline-size: 0;
   display: none;
 }
 .cds--copy-btn .cds--copy-btn__feedback {
   box-shadow: 0 2px 6px var(--cds-shadow, rgba(0, 0, 0, 0.3));
   z-index: 6000;
-  width: max-content;
-  min-width: 1.5rem;
-  max-width: 13rem;
-  height: auto;
   padding: 0.1875rem 1rem;
-  background-color: var(--cds-background-inverse, #393939);
   border-radius: 0.125rem;
+  background-color: var(--cds-background-inverse, #393939);
+  block-size: auto;
   color: var(--cds-text-inverse, #ffffff);
   font-weight: 400;
-  text-align: left;
+  inline-size: max-content;
+  max-inline-size: 13rem;
+  min-inline-size: 1.5rem;
+  text-align: start;
   transform: translateX(-50%);
   font-size: var(--cds-body-compact-01-font-size, 0.875rem);
   font-weight: var(--cds-body-compact-01-font-weight, 400);
@@ -1204,17 +1274,17 @@
 }
 @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
   .cds--copy-btn .cds--copy-btn__feedback {
-    width: auto;
+    inline-size: auto;
   }
 }
 @supports (-ms-accelerator: true) {
   .cds--copy-btn .cds--copy-btn__feedback {
-    width: auto;
+    inline-size: auto;
   }
 }
 @supports (-ms-ime-align: auto) {
   .cds--copy-btn .cds--copy-btn__feedback {
-    width: auto;
+    inline-size: auto;
   }
 }
 @media screen and (-ms-high-contrast: active), screen and (prefers-contrast) {
@@ -1302,8 +1372,8 @@
   display: inline;
   padding: 0;
   border: 1px solid transparent;
-  background-color: var(--cds-layer);
   border-radius: 4px;
+  background-color: var(--cds-layer);
   color: var(--cds-text-primary, #161616);
   cursor: pointer;
 }
@@ -1336,26 +1406,26 @@
 .cds--snippet--inline::before {
   position: absolute;
   z-index: 6000;
-  width: 0;
-  height: 0;
   border-style: solid;
+  block-size: 0;
   content: "";
+  inline-size: 0;
   display: none;
   border: none;
 }
 .cds--snippet--inline .cds--copy-btn__feedback {
   box-shadow: 0 2px 6px var(--cds-shadow, rgba(0, 0, 0, 0.3));
   z-index: 6000;
-  width: max-content;
-  min-width: 1.5rem;
-  max-width: 13rem;
-  height: auto;
   padding: 0.1875rem 1rem;
-  background-color: var(--cds-background-inverse, #393939);
   border-radius: 0.125rem;
+  background-color: var(--cds-background-inverse, #393939);
+  block-size: auto;
   color: var(--cds-text-inverse, #ffffff);
   font-weight: 400;
-  text-align: left;
+  inline-size: max-content;
+  max-inline-size: 13rem;
+  min-inline-size: 1.5rem;
+  text-align: start;
   transform: translateX(-50%);
   font-size: var(--cds-body-compact-01-font-size, 0.875rem);
   font-weight: var(--cds-body-compact-01-font-weight, 400);
@@ -1369,17 +1439,17 @@
 }
 @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
   .cds--snippet--inline .cds--copy-btn__feedback {
-    width: auto;
+    inline-size: auto;
   }
 }
 @supports (-ms-accelerator: true) {
   .cds--snippet--inline .cds--copy-btn__feedback {
-    width: auto;
+    inline-size: auto;
   }
 }
 @supports (-ms-ime-align: auto) {
   .cds--snippet--inline .cds--copy-btn__feedback {
-    width: auto;
+    inline-size: auto;
   }
 }
 @media screen and (-ms-high-contrast: active), screen and (prefers-contrast) {
@@ -1427,29 +1497,29 @@
   line-height: var(--cds-code-01-line-height, 1.33333);
   letter-spacing: var(--cds-code-01-letter-spacing, 0.32px);
   position: relative;
-  width: 100%;
-  max-width: 48rem;
   background-color: var(--cds-layer);
+  inline-size: 100%;
+  max-inline-size: 48rem;
   display: flex;
-  height: 2.5rem;
   align-items: center;
-  padding-right: 2.5rem;
+  block-size: 2.5rem;
+  padding-inline-end: 2.5rem;
 }
 
 .cds--snippet--single.cds--snippet--no-copy {
   padding: 0;
 }
 .cds--snippet--single.cds--snippet--no-copy::after {
-  right: 1rem;
+  inset-inline-end: 1rem;
 }
 
 .cds--snippet--single .cds--snippet-container {
   position: relative;
   display: flex;
-  height: 100%;
   align-items: center;
-  padding-left: 1rem;
+  block-size: 100%;
   overflow-x: auto;
+  padding-inline-start: 1rem;
 }
 .cds--snippet--single .cds--snippet-container:focus {
   outline: 2px solid var(--cds-focus, #0f62fe);
@@ -1467,7 +1537,7 @@
   font-weight: var(--cds-code-01-font-weight, 400);
   line-height: var(--cds-code-01-line-height, 1.33333);
   letter-spacing: var(--cds-code-01-letter-spacing, 0.32px);
-  padding-right: 0.5rem;
+  padding-inline-end: 0.5rem;
 }
 
 .cds--snippet--single pre,
@@ -1482,18 +1552,18 @@
   line-height: var(--cds-code-01-line-height, 1.33333);
   letter-spacing: var(--cds-code-01-letter-spacing, 0.32px);
   position: relative;
-  width: 100%;
-  max-width: 48rem;
   background-color: var(--cds-layer);
+  inline-size: 100%;
+  max-inline-size: 48rem;
   display: flex;
   padding: 1rem;
 }
 
 .cds--snippet--multi .cds--snippet-container {
   position: relative;
-  min-height: 100%;
-  max-height: 100%;
   order: 1;
+  max-block-size: 100%;
+  min-block-size: 100%;
   overflow-y: auto;
   transition: max-height 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
 }
@@ -1509,7 +1579,7 @@
 }
 
 .cds--snippet--multi.cds--snippet--expand .cds--snippet-container {
-  padding-bottom: 1rem;
+  padding-block-end: 1rem;
   transition: max-height 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
 }
 
@@ -1519,27 +1589,26 @@
 }
 
 .cds--snippet--multi .cds--snippet-container pre {
-  padding-right: 2.5rem;
-  padding-bottom: 1.5rem;
-  overflow-x: auto;
+  padding-block-end: 1.5rem;
+  padding-inline-end: 2.5rem;
 }
 
 .cds--snippet--multi.cds--snippet--no-copy .cds--snippet-container pre {
-  padding-right: 0;
+  padding-inline-end: 0;
 }
 
-.cds--snippet--multi.cds--snippet--expand .cds--snippet-container pre {
-  overflow-x: auto;
-}
-
-.cds--snippet--multi.cds--snippet--has-right-overflow .cds--snippet-container pre::after {
+.cds--snippet--multi.cds--snippet--has-right-overflow::after {
   position: absolute;
-  top: 0;
-  right: 0;
-  width: 1rem;
-  height: 100%;
   background-image: linear-gradient(to right, transparent, var(--cds-layer));
+  block-size: 100%;
   content: "";
+  inline-size: 1rem;
+  inset-block-start: 0;
+  inset-inline-end: 1rem;
+}
+
+[dir=rtl] .cds--snippet--multi.cds--snippet--has-right-overflow::after {
+  background-image: linear-gradient(to left, transparent, var(--cds-layer));
 }
 
 .cds--snippet--multi .cds--snippet-container pre code {
@@ -1547,9 +1616,9 @@
 }
 
 .cds--snippet__icon {
-  width: 1rem;
-  height: 1rem;
+  block-size: 1rem;
   fill: var(--cds-icon-primary, #161616);
+  inline-size: 1rem;
   transition: all 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
 }
 
@@ -1598,14 +1667,14 @@
 .cds--snippet .cds--popover-container {
   font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;
   position: absolute;
-  top: 0;
-  right: 0;
+  inset-block-start: 0;
+  inset-inline-end: 0;
 }
 
 .cds--snippet--inline.cds--btn {
-  width: initial;
-  height: 1.25rem;
-  min-height: 1.25rem;
+  block-size: 1.25rem;
+  inline-size: initial;
+  min-block-size: 1.25rem;
   padding-inline: 0;
 }
 
@@ -1614,8 +1683,8 @@
 }
 
 .cds--snippet.cds--snippet--multi .cds--popover-container {
-  top: 0.5rem;
-  right: 0.5rem;
+  inset-block-start: 0.5rem;
+  inset-inline-end: 0.5rem;
 }
 
 .cds--snippet--multi .cds--copy-btn {
@@ -1630,20 +1699,20 @@
   font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;
   position: absolute;
   z-index: 10;
-  right: 0;
-  bottom: 0;
   display: inline-flex;
-  height: 2rem;
   align-items: center;
   padding: 0.5rem 1rem;
   border: 0;
   background-color: var(--cds-layer);
+  block-size: 2rem;
   color: var(--cds-text-primary, #161616);
+  inset-block-end: 0;
+  inset-inline-end: 0;
 }
 
 .cds--snippet-btn--expand .cds--snippet-btn--text {
   position: relative;
-  top: -0.0625rem;
+  inset-block-start: -0.0625rem;
 }
 
 .cds--snippet-btn--expand--hide.cds--snippet-btn--expand {
@@ -1651,8 +1720,8 @@
 }
 
 .cds--snippet-btn--expand .cds--icon-chevron--down {
-  margin-left: 0.5rem;
   fill: var(--cds-icon-primary, #161616);
+  margin-inline-start: 0.5rem;
   transform: rotate(0deg);
   transition: 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
 }
@@ -1704,77 +1773,85 @@
 }
 
 .cds--snippet--light.cds--snippet--single::after,
-.cds--snippet--light.cds--snippet--multi .cds--snippet-container pre::after {
+.cds--snippet--light.cds--snippet--multi::after {
   background-image: linear-gradient(to right, rgba(var(--cds-layer), 0), var(--cds-layer));
 }
 
 .cds--snippet.cds--skeleton .cds--snippet-container {
-  width: 100%;
-  height: 100%;
+  block-size: 100%;
+  inline-size: 100%;
 }
 
 .cds--snippet-button .cds--btn--copy__feedback {
-  top: 3.175rem;
-  right: auto;
-  left: 50%;
+  inset-block-start: 3.175rem;
+  inset-inline-end: auto;
+  inset-inline-start: 50%;
 }
 .cds--snippet-button .cds--btn--copy__feedback::before {
-  top: 0;
+  inset-block-start: 0;
 }
 .cds--snippet-button .cds--btn--copy__feedback::after {
-  top: -0.25rem;
+  inset-block-start: -0.25rem;
 }
 
 .cds--snippet--multi .cds--snippet-button .cds--btn--copy__feedback {
-  top: 2.675rem;
+  inset-block-start: 2.675rem;
 }
 
 .cds--snippet--inline .cds--btn--copy__feedback {
-  top: calc(100% - 0.25rem);
-  right: auto;
-  left: 50%;
+  inset-block-start: calc(100% - 0.25rem);
+  inset-inline-end: auto;
+  inset-inline-start: 50%;
 }
 
 .cds--snippet__overflow-indicator--left,
 .cds--snippet__overflow-indicator--right {
   z-index: 1;
-  width: 1rem;
   flex: 1 0 auto;
+  inline-size: 1rem;
 }
 
 .cds--snippet__overflow-indicator--left {
   order: 0;
-  margin-right: -1rem;
   background-image: linear-gradient(to left, transparent, var(--cds-layer));
+  margin-inline-end: -1rem;
 }
 
 .cds--snippet__overflow-indicator--right {
   order: 2;
-  margin-left: -1rem;
+  background-image: linear-gradient(to right, transparent, var(--cds-layer));
+  margin-inline-start: -1rem;
+}
+
+[dir=rtl] .cds--snippet__overflow-indicator--left {
   background-image: linear-gradient(to right, transparent, var(--cds-layer));
 }
 
+[dir=rtl] .cds--snippet__overflow-indicator--right {
+  background-image: linear-gradient(to left, transparent, var(--cds-layer));
+}
+
 .cds--snippet--single .cds--snippet__overflow-indicator--right,
 .cds--snippet--single .cds--snippet__overflow-indicator--left {
   position: absolute;
-  width: 2rem;
-  height: calc(100% - 0.25rem);
+  block-size: calc(100% - 0.25rem);
+  inline-size: 2rem;
 }
 
 .cds--snippet--single .cds--snippet__overflow-indicator--right {
-  right: 2.5rem;
+  inset-inline-end: 2.5rem;
 }
 
 .cds--snippet--single.cds--snippet--no-copy .cds--snippet__overflow-indicator--right {
-  right: 0;
+  inset-inline-end: 0;
 }
 
 .cds--snippet--single .cds--snippet-container:focus ~ .cds--snippet__overflow-indicator--right {
-  right: calc(2.5rem + 0.125rem);
+  inset-inline-end: calc(2.5rem + 0.125rem);
 }
 
 .cds--snippet--single .cds--snippet-container:focus + .cds--snippet__overflow-indicator--left {
-  left: 0.125rem;
+  inset-inline-start: 0.125rem;
 }
 
 .cds--snippet--light .cds--snippet__overflow-indicator--left {
@@ -1785,7 +1862,7 @@
   background-image: linear-gradient(to right, transparent, var(--cds-layer));
 }
 
-@media not all and (min-resolution: 0.001dpcm) {
+@media not all and (min-resolution >= 0.001dpcm) {
   @supports (-webkit-appearance: none) and (stroke-color: transparent) {
     .cds--snippet__overflow-indicator--left {
       background-image: linear-gradient(to left, rgba(var(--cds-layer), 0), var(--cds-layer));
@@ -1796,11 +1873,11 @@
   }
 }
 .cds--snippet--multi.cds--skeleton {
-  height: 6.125rem;
+  block-size: 6.125rem;
 }
 
 .cds--snippet--single.cds--skeleton {
-  height: 3.5rem;
+  block-size: 3.5rem;
 }
 
 .cds--snippet.cds--skeleton span {
@@ -1811,9 +1888,9 @@
   box-shadow: none;
   pointer-events: none;
   display: block;
-  width: 100%;
-  height: 1rem;
-  margin-top: 0.5rem;
+  block-size: 1rem;
+  inline-size: 100%;
+  margin-block-start: 0.5rem;
 }
 .cds--snippet.cds--skeleton span:hover, .cds--snippet.cds--skeleton span:focus, .cds--snippet.cds--skeleton span:active {
   border: none;
@@ -1822,11 +1899,11 @@
 }
 .cds--snippet.cds--skeleton span::before {
   position: absolute;
-  width: 100%;
-  height: 100%;
   animation: 3000ms ease-in-out skeleton infinite;
   background: var(--cds-skeleton-element, #c6c6c6);
+  block-size: 100%;
   content: "";
+  inline-size: 100%;
   will-change: transform-origin, transform, opacity;
 }
 @media (prefers-reduced-motion: reduce) {
@@ -1838,14 +1915,14 @@
   margin: 0;
 }
 .cds--snippet.cds--skeleton span:nth-child(2) {
-  width: 85%;
+  inline-size: 85%;
 }
 .cds--snippet.cds--skeleton span:nth-child(3) {
-  width: 95%;
+  inline-size: 95%;
 }
 
 .cds--snippet--single.cds--skeleton .cds--snippet-container {
-  padding-bottom: 0;
+  padding-block-end: 0;
 }
 
 /* stylelint-disable */
@@ -1937,12 +2014,11 @@
   font-weight: var(--cds-body-compact-02-font-weight, 400);
   line-height: var(--cds-body-compact-02-line-height, 1.375);
   letter-spacing: var(--cds-body-compact-02-letter-spacing, 0);
+  overflow: hidden auto;
   min-height: 4rem;
   padding: 0 20% 0 1rem;
   margin-bottom: 1.5rem;
   grid-row: auto;
-  overflow-x: hidden;
-  overflow-y: auto;
 }
 
 .c4p--about-modal .cds--modal-content--overflow-indicator {
@@ -2128,28 +2204,24 @@ p.c4p--about-modal__copyright-text:first-child {
   --cds-grid-gutter-end: calc(var(--cds-grid-gutter) / 2);
   --cds-grid-column-hang: calc(var(--cds-grid-gutter) / 2);
   display: grid;
-  width: 100%;
-  max-width: 99rem;
-  padding-right: var(--cds-grid-margin);
-  padding-left: var(--cds-grid-margin);
-  margin-right: auto;
-  margin-left: auto;
   grid-template-columns: repeat(var(--cds-grid-columns), minmax(0, 1fr));
+  inline-size: 100%;
+  margin-inline: auto;
+  max-inline-size: 99rem;
+  padding-inline: var(--cds-grid-margin);
 }
 
 .cds--css-grid--full-width {
-  max-width: 100%;
+  max-inline-size: 100%;
 }
 
 .cds--css-grid-column {
   --cds-grid-mode-start: var(--cds-grid-gutter-start);
   --cds-grid-mode-end: var(--cds-grid-gutter-end);
-  margin-right: var(--cds-grid-gutter-end);
-  margin-left: var(--cds-grid-gutter-start);
+  margin-inline: var(--cds-grid-gutter-start) var(--cds-grid-gutter-end);
 }
 [dir=rtl] .cds--css-grid-column {
-  margin-right: var(--cds-grid-gutter-start);
-  margin-left: var(--cds-grid-gutter-end);
+  margin-inline: var(--cds-grid-gutter-end) var(--cds-grid-gutter-start);
 }
 
 .cds--css-grid--narrow {
@@ -2163,13 +2235,11 @@ p.c4p--about-modal__copyright-text:first-child {
 
 .cds--subgrid {
   display: grid;
-  margin-right: calc(var(--cds-grid-mode-end) * -1);
-  margin-left: calc(var(--cds-grid-mode-start) * -1);
   grid-template-columns: repeat(var(--cds-grid-columns), minmax(0, 1fr));
+  margin-inline: calc(var(--cds-grid-mode-start) * -1) calc(var(--cds-grid-mode-end) * -1);
 }
 [dir=rtl] .cds--subgrid {
-  margin-right: calc(var(--cds-grid-mode-start) * -1);
-  margin-left: calc(var(--cds-grid-mode-end) * -1);
+  margin-inline: calc(var(--cds-grid-mode-end) * -1) calc(var(--cds-grid-mode-start) * -1);
 }
 
 .cds--subgrid--wide {
@@ -2191,11 +2261,10 @@ p.c4p--about-modal__copyright-text:first-child {
 }
 
 .cds--grid-column-hang {
-  margin-left: var(--cds-grid-column-hang);
+  margin-inline-start: var(--cds-grid-column-hang);
 }
 [dir=rtl] .cds--grid-column-hang {
-  margin-right: var(--cds-grid-column-hang);
-  margin-left: initial;
+  margin-inline: initial var(--cds-grid-column-hang);
 }
 
 .cds--col-span-0 {
@@ -4318,10 +4387,7 @@ p.c4p--about-modal__copyright-text:first-child {
   border-bottom: 1px solid var(--cds-layer-active-01, #c6c6c6);
 }
 .c4p--side-panel__container .c4p--side-panel__action-toolbar.c4p--side-panel__action-toolbar-no-animation + .c4p--side-panel__body-content {
-  margin-top: calc(
-      var(--c4p--side-panel--title-text-height) +
-        var(--c4p--side-panel--subtitle-container-height) + 3rem
-    );
+  margin-top: calc(var(--c4p--side-panel--title-text-height) + var(--c4p--side-panel--subtitle-container-height) + 3rem);
 }
 .c4p--side-panel__container .c4p--side-panel__subtitle-text.c4p--side-panel__subtitle-text-no-animation.c4p--side-panel__subtitle-text-no-animation-no-action-toolbar {
   border-bottom: 1px solid var(--cds-layer-active-01, #c6c6c6);
@@ -4462,13 +4528,13 @@ p.c4p--about-modal__copyright-text:first-child {
 
 .c4p--create-side-panel.c4p--side-panel__container--xs .c4p--side-panel__title-text {
   width: calc(16rem - 1rem);
-  padding-right: calc((16rem * 0.2) - 1rem);
+  padding-right: calc(16rem * 0.2 - 1rem);
   margin-bottom: 0.25rem;
 }
 
 .c4p--create-side-panel.c4p--side-panel__container--xs .c4p--side-panel__subtitle-text {
   width: calc(16rem - 1rem);
-  padding-right: calc((16rem * 0.2) - 1rem);
+  padding-right: calc(16rem * 0.2 - 1rem);
   padding-bottom: 1rem;
   border-bottom: 1px solid var(--cds-layer-accent-01, #e0e0e0);
   color: var(--cds-text-secondary, #525252);
@@ -4476,13 +4542,13 @@ p.c4p--about-modal__copyright-text:first-child {
 
 .c4p--create-side-panel.c4p--side-panel__container--sm .c4p--side-panel__title-text {
   width: calc(20rem - 1rem);
-  padding-right: calc((20rem * 0.2) - 1rem);
+  padding-right: calc(20rem * 0.2 - 1rem);
   margin-bottom: 0.25rem;
 }
 
 .c4p--create-side-panel.c4p--side-panel__container--sm .c4p--side-panel__subtitle-text {
   width: calc(20rem - 1rem);
-  padding-right: calc((20rem * 0.2) - 1rem);
+  padding-right: calc(20rem * 0.2 - 1rem);
   padding-bottom: 1rem;
   border-bottom: 1px solid var(--cds-layer-accent-01, #e0e0e0);
   color: var(--cds-text-secondary, #525252);
@@ -4490,13 +4556,13 @@ p.c4p--about-modal__copyright-text:first-child {
 
 .c4p--create-side-panel.c4p--side-panel__container--md .c4p--side-panel__title-text {
   width: calc(30rem - 1rem);
-  padding-right: calc((30rem * 0.2) - 1rem);
+  padding-right: calc(30rem * 0.2 - 1rem);
   margin-bottom: 0.25rem;
 }
 
 .c4p--create-side-panel.c4p--side-panel__container--md .c4p--side-panel__subtitle-text {
   width: calc(30rem - 1rem);
-  padding-right: calc((30rem * 0.2) - 1rem);
+  padding-right: calc(30rem * 0.2 - 1rem);
   padding-bottom: 1rem;
   border-bottom: 1px solid var(--cds-layer-accent-01, #e0e0e0);
   color: var(--cds-text-secondary, #525252);
@@ -4504,13 +4570,13 @@ p.c4p--about-modal__copyright-text:first-child {
 
 .c4p--create-side-panel.c4p--side-panel__container--lg .c4p--side-panel__title-text {
   width: calc(40rem - 1rem);
-  padding-right: calc((40rem * 0.2) - 1rem);
+  padding-right: calc(40rem * 0.2 - 1rem);
   margin-bottom: 0.25rem;
 }
 
 .c4p--create-side-panel.c4p--side-panel__container--lg .c4p--side-panel__subtitle-text {
   width: calc(40rem - 1rem);
-  padding-right: calc((40rem * 0.2) - 1rem);
+  padding-right: calc(40rem * 0.2 - 1rem);
   padding-bottom: 1rem;
   border-bottom: 1px solid var(--cds-layer-accent-01, #e0e0e0);
   color: var(--cds-text-secondary, #525252);
@@ -4518,13 +4584,13 @@ p.c4p--about-modal__copyright-text:first-child {
 
 .c4p--create-side-panel.c4p--side-panel__container--2xl .c4p--side-panel__title-text {
   width: calc(75% - 1rem);
-  padding-right: calc((75% * 0.2) - 1rem);
+  padding-right: calc(75% * 0.2 - 1rem);
   margin-bottom: 0.25rem;
 }
 
 .c4p--create-side-panel.c4p--side-panel__container--2xl .c4p--side-panel__subtitle-text {
   width: calc(75% - 1rem);
-  padding-right: calc((75% * 0.2) - 1rem);
+  padding-right: calc(75% * 0.2 - 1rem);
   padding-bottom: 1rem;
   border-bottom: 1px solid var(--cds-layer-accent-01, #e0e0e0);
   color: var(--cds-text-secondary, #525252);
@@ -4633,7 +4699,7 @@ p.c4p--about-modal__copyright-text:first-child {
   max-height: calc(100% - 3rem + 1rem);
 }
 .c4p--tearsheet.c4p--tearsheet--stacked-1-of-3 .c4p--tearsheet__container {
-  max-height: calc(100% - 3rem + (2 * 1rem));
+  max-height: calc(100% - 3rem + 2 * 1rem);
 }
 .c4p--tearsheet .c4p--tearsheet__container--lower {
   max-height: calc(100% - (3rem + 2.5rem));
@@ -4642,7 +4708,7 @@ p.c4p--about-modal__copyright-text:first-child {
   max-height: calc(100% - (3rem + 2.5rem) + 1rem);
 }
 .c4p--tearsheet.c4p--tearsheet--stacked-1-of-3 .c4p--tearsheet__container--lower {
-  max-height: calc(100% - (3rem + 2.5rem) + (2 * 1rem));
+  max-height: calc(100% - (3rem + 2.5rem) + 2 * 1rem);
 }
 .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__container {
   width: 100%;
@@ -4652,7 +4718,7 @@ p.c4p--about-modal__copyright-text:first-child {
 }
 @media (min-width: 42rem) {
   .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__container {
-    width: calc(100% - (2 * 4rem));
+    width: calc(100% - 2 * 4rem);
   }
 }
 .c4p--tearsheet.c4p--tearsheet--stacked-1-of-2.is-visible .c4p--tearsheet__container, .c4p--tearsheet.c4p--tearsheet--stacked-2-of-3.is-visible .c4p--tearsheet__container {
@@ -6169,12 +6235,12 @@ button.c4p--add-select__global-filter-toggle--open {
 .c4p--notifications-panel__container .c4p--notifications-panel__header-container .c4p--notifications-panel__do-not-disturb-toggle .cds--toggle__label-text {
   position: absolute;
   overflow: hidden;
-  width: 1px;
-  height: 1px;
   padding: 0;
   border: 0;
   margin: -1px;
+  block-size: 1px;
   clip: rect(0, 0, 0, 0);
+  inline-size: 1px;
   visibility: inherit;
   white-space: nowrap;
 }
@@ -6333,7 +6399,7 @@ button.c4p--add-select__global-filter-toggle--open {
 .c4p--notifications-panel__container .c4p--notifications-panel__notification-previous:not(:first-of-type):before {
   position: absolute;
   top: 0;
-  width: calc(100% - (2 * 1rem));
+  width: calc(100% - 2 * 1rem);
   height: 1px;
   margin: 0 auto;
   background-color: var(--cds-layer-02, #ffffff);
@@ -6396,163 +6462,135 @@ button.c4p--add-select__global-filter-toggle--open {
 }
 
 .cds--grid {
-  margin-right: auto;
-  margin-left: auto;
-  max-width: 99rem;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  margin-inline: auto;
+  max-inline-size: 99rem;
+  padding-inline: 1rem;
 }
 @media (min-width: 42rem) {
   .cds--grid {
-    padding-right: 2rem;
-    padding-left: 2rem;
+    padding-inline: 2rem;
   }
 }
 @media (min-width: 99rem) {
   .cds--grid {
-    padding-right: 2.5rem;
-    padding-left: 2.5rem;
+    padding-inline: 2.5rem;
   }
 }
 
 @media (min-width: 99rem) {
   .cds--grid--full-width {
-    max-width: 100%;
+    max-inline-size: 100%;
   }
 }
 .cds--row {
   display: flex;
   flex-wrap: wrap;
-  margin-right: -1rem;
-  margin-left: -1rem;
+  margin-inline: -1rem;
 }
 
 .cds--row-padding [class*=cds--col],
 .cds--col-padding {
-  padding-top: 1rem;
-  padding-bottom: 1rem;
+  padding-block: 1rem;
 }
 
 .cds--grid--condensed [class*=cds--col] {
-  padding-top: 0.03125rem;
-  padding-bottom: 0.03125rem;
+  padding-block: 0.03125rem;
 }
 
 .cds--col {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col, .cds--grid--condensed .cds--col {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col, .cds--grid--narrow .cds--col {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-sm-0 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-sm-0, .cds--grid--condensed .cds--col-sm-0 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-sm-0, .cds--grid--narrow .cds--col-sm-0 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-sm-1 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-sm-1, .cds--grid--condensed .cds--col-sm-1 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-sm-1, .cds--grid--narrow .cds--col-sm-1 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-sm-2 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-sm-2, .cds--grid--condensed .cds--col-sm-2 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-sm-2, .cds--grid--narrow .cds--col-sm-2 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-sm-3 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-sm-3, .cds--grid--condensed .cds--col-sm-3 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-sm-3, .cds--grid--narrow .cds--col-sm-3 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-sm-4 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-sm-4, .cds--grid--condensed .cds--col-sm-4 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-sm-4, .cds--grid--narrow .cds--col-sm-4 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-sm,
 .cds--col-sm--auto {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-sm, .cds--grid--condensed .cds--col-sm,
 .cds--row--condensed .cds--col-sm--auto,
 .cds--grid--condensed .cds--col-sm--auto {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-sm, .cds--grid--narrow .cds--col-sm,
 .cds--row--narrow .cds--col-sm--auto,
 .cds--grid--narrow .cds--col-sm--auto {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col,
 .cds--col-sm {
-  max-width: 100%;
   flex-basis: 0;
   flex-grow: 1;
+  max-inline-size: 100%;
 }
 
 .cds--col--auto,
 .cds--col-sm--auto {
-  width: auto;
-  max-width: 100%;
   flex: 1 0 0%;
+  inline-size: auto;
+  max-inline-size: 100%;
 }
 
 .cds--col-sm-0 {
@@ -6561,1498 +6599,1305 @@ button.c4p--add-select__global-filter-toggle--open {
 
 .cds--col-sm-1 {
   display: block;
-  max-width: 25%;
   flex: 0 0 25%;
+  max-inline-size: 25%;
 }
 
 .cds--col-sm-2 {
   display: block;
-  max-width: 50%;
   flex: 0 0 50%;
+  max-inline-size: 50%;
 }
 
 .cds--col-sm-3 {
   display: block;
-  max-width: 75%;
   flex: 0 0 75%;
+  max-inline-size: 75%;
 }
 
 .cds--col-sm-4 {
   display: block;
-  max-width: 100%;
   flex: 0 0 100%;
+  max-inline-size: 100%;
 }
 
 .cds--offset-sm-0 {
-  margin-left: 0;
+  margin-inline-start: 0;
 }
 
 .cds--offset-sm-1 {
-  margin-left: 25%;
+  margin-inline-start: 25%;
 }
 
 .cds--offset-sm-2 {
-  margin-left: 50%;
+  margin-inline-start: 50%;
 }
 
 .cds--offset-sm-3 {
-  margin-left: 75%;
+  margin-inline-start: 75%;
 }
 
 .cds--col-md-0 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-md-0, .cds--grid--condensed .cds--col-md-0 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-md-0, .cds--grid--narrow .cds--col-md-0 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-md-1 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-md-1, .cds--grid--condensed .cds--col-md-1 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-md-1, .cds--grid--narrow .cds--col-md-1 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-md-2 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-md-2, .cds--grid--condensed .cds--col-md-2 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-md-2, .cds--grid--narrow .cds--col-md-2 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-md-3 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-md-3, .cds--grid--condensed .cds--col-md-3 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-md-3, .cds--grid--narrow .cds--col-md-3 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-md-4 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-md-4, .cds--grid--condensed .cds--col-md-4 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-md-4, .cds--grid--narrow .cds--col-md-4 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-md-5 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-md-5, .cds--grid--condensed .cds--col-md-5 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-md-5, .cds--grid--narrow .cds--col-md-5 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-md-6 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-md-6, .cds--grid--condensed .cds--col-md-6 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-md-6, .cds--grid--narrow .cds--col-md-6 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-md-7 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-md-7, .cds--grid--condensed .cds--col-md-7 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-md-7, .cds--grid--narrow .cds--col-md-7 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-md-8 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-md-8, .cds--grid--condensed .cds--col-md-8 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-md-8, .cds--grid--narrow .cds--col-md-8 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-md,
 .cds--col-md--auto {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-md, .cds--grid--condensed .cds--col-md,
 .cds--row--condensed .cds--col-md--auto,
 .cds--grid--condensed .cds--col-md--auto {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-md, .cds--grid--narrow .cds--col-md,
 .cds--row--narrow .cds--col-md--auto,
 .cds--grid--narrow .cds--col-md--auto {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 @media (min-width: 42rem) {
   .cds--col,
   .cds--col-md {
-    max-width: 100%;
     flex-basis: 0;
     flex-grow: 1;
+    max-inline-size: 100%;
   }
   .cds--col--auto,
   .cds--col-md--auto {
-    width: auto;
-    max-width: 100%;
     flex: 1 0 0%;
+    inline-size: auto;
+    max-inline-size: 100%;
   }
   .cds--col-md-0 {
     display: none;
   }
   .cds--col-md-1 {
     display: block;
-    max-width: 12.5%;
     flex: 0 0 12.5%;
+    max-inline-size: 12.5%;
   }
   .cds--col-md-2 {
     display: block;
-    max-width: 25%;
     flex: 0 0 25%;
+    max-inline-size: 25%;
   }
   .cds--col-md-3 {
     display: block;
-    max-width: 37.5%;
     flex: 0 0 37.5%;
+    max-inline-size: 37.5%;
   }
   .cds--col-md-4 {
     display: block;
-    max-width: 50%;
     flex: 0 0 50%;
+    max-inline-size: 50%;
   }
   .cds--col-md-5 {
     display: block;
-    max-width: 62.5%;
     flex: 0 0 62.5%;
+    max-inline-size: 62.5%;
   }
   .cds--col-md-6 {
     display: block;
-    max-width: 75%;
     flex: 0 0 75%;
+    max-inline-size: 75%;
   }
   .cds--col-md-7 {
     display: block;
-    max-width: 87.5%;
     flex: 0 0 87.5%;
+    max-inline-size: 87.5%;
   }
   .cds--col-md-8 {
     display: block;
-    max-width: 100%;
     flex: 0 0 100%;
+    max-inline-size: 100%;
   }
   .cds--offset-md-0 {
-    margin-left: 0;
+    margin-inline-start: 0;
   }
   .cds--offset-md-1 {
-    margin-left: 12.5%;
+    margin-inline-start: 12.5%;
   }
   .cds--offset-md-2 {
-    margin-left: 25%;
+    margin-inline-start: 25%;
   }
   .cds--offset-md-3 {
-    margin-left: 37.5%;
+    margin-inline-start: 37.5%;
   }
   .cds--offset-md-4 {
-    margin-left: 50%;
+    margin-inline-start: 50%;
   }
   .cds--offset-md-5 {
-    margin-left: 62.5%;
+    margin-inline-start: 62.5%;
   }
   .cds--offset-md-6 {
-    margin-left: 75%;
+    margin-inline-start: 75%;
   }
   .cds--offset-md-7 {
-    margin-left: 87.5%;
+    margin-inline-start: 87.5%;
   }
 }
 .cds--col-lg-0 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-lg-0, .cds--grid--condensed .cds--col-lg-0 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-lg-0, .cds--grid--narrow .cds--col-lg-0 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-lg-1 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-lg-1, .cds--grid--condensed .cds--col-lg-1 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-lg-1, .cds--grid--narrow .cds--col-lg-1 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-lg-2 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-lg-2, .cds--grid--condensed .cds--col-lg-2 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-lg-2, .cds--grid--narrow .cds--col-lg-2 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-lg-3 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-lg-3, .cds--grid--condensed .cds--col-lg-3 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-lg-3, .cds--grid--narrow .cds--col-lg-3 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-lg-4 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-lg-4, .cds--grid--condensed .cds--col-lg-4 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-lg-4, .cds--grid--narrow .cds--col-lg-4 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-lg-5 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-lg-5, .cds--grid--condensed .cds--col-lg-5 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-lg-5, .cds--grid--narrow .cds--col-lg-5 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-lg-6 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-lg-6, .cds--grid--condensed .cds--col-lg-6 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-lg-6, .cds--grid--narrow .cds--col-lg-6 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-lg-7 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-lg-7, .cds--grid--condensed .cds--col-lg-7 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-lg-7, .cds--grid--narrow .cds--col-lg-7 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-lg-8 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-lg-8, .cds--grid--condensed .cds--col-lg-8 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-lg-8, .cds--grid--narrow .cds--col-lg-8 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-lg-9 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-lg-9, .cds--grid--condensed .cds--col-lg-9 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-lg-9, .cds--grid--narrow .cds--col-lg-9 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-lg-10 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-lg-10, .cds--grid--condensed .cds--col-lg-10 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-lg-10, .cds--grid--narrow .cds--col-lg-10 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-lg-11 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-lg-11, .cds--grid--condensed .cds--col-lg-11 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-lg-11, .cds--grid--narrow .cds--col-lg-11 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-lg-12 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-lg-12, .cds--grid--condensed .cds--col-lg-12 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-lg-12, .cds--grid--narrow .cds--col-lg-12 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-lg-13 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-lg-13, .cds--grid--condensed .cds--col-lg-13 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-lg-13, .cds--grid--narrow .cds--col-lg-13 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-lg-14 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-lg-14, .cds--grid--condensed .cds--col-lg-14 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-lg-14, .cds--grid--narrow .cds--col-lg-14 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-lg-15 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-lg-15, .cds--grid--condensed .cds--col-lg-15 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-lg-15, .cds--grid--narrow .cds--col-lg-15 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-lg-16 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-lg-16, .cds--grid--condensed .cds--col-lg-16 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-lg-16, .cds--grid--narrow .cds--col-lg-16 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-lg,
 .cds--col-lg--auto {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-lg, .cds--grid--condensed .cds--col-lg,
 .cds--row--condensed .cds--col-lg--auto,
 .cds--grid--condensed .cds--col-lg--auto {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-lg, .cds--grid--narrow .cds--col-lg,
 .cds--row--narrow .cds--col-lg--auto,
 .cds--grid--narrow .cds--col-lg--auto {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 @media (min-width: 66rem) {
   .cds--col,
   .cds--col-lg {
-    max-width: 100%;
     flex-basis: 0;
     flex-grow: 1;
+    max-inline-size: 100%;
   }
   .cds--col--auto,
   .cds--col-lg--auto {
-    width: auto;
-    max-width: 100%;
     flex: 1 0 0%;
+    inline-size: auto;
+    max-inline-size: 100%;
   }
   .cds--col-lg-0 {
     display: none;
   }
   .cds--col-lg-1 {
     display: block;
-    max-width: 6.25%;
     flex: 0 0 6.25%;
+    max-inline-size: 6.25%;
   }
   .cds--col-lg-2 {
     display: block;
-    max-width: 12.5%;
     flex: 0 0 12.5%;
+    max-inline-size: 12.5%;
   }
   .cds--col-lg-3 {
     display: block;
-    max-width: 18.75%;
     flex: 0 0 18.75%;
+    max-inline-size: 18.75%;
   }
   .cds--col-lg-4 {
     display: block;
-    max-width: 25%;
     flex: 0 0 25%;
+    max-inline-size: 25%;
   }
   .cds--col-lg-5 {
     display: block;
-    max-width: 31.25%;
     flex: 0 0 31.25%;
+    max-inline-size: 31.25%;
   }
   .cds--col-lg-6 {
     display: block;
-    max-width: 37.5%;
     flex: 0 0 37.5%;
+    max-inline-size: 37.5%;
   }
   .cds--col-lg-7 {
     display: block;
-    max-width: 43.75%;
     flex: 0 0 43.75%;
+    max-inline-size: 43.75%;
   }
   .cds--col-lg-8 {
     display: block;
-    max-width: 50%;
     flex: 0 0 50%;
+    max-inline-size: 50%;
   }
   .cds--col-lg-9 {
     display: block;
-    max-width: 56.25%;
     flex: 0 0 56.25%;
+    max-inline-size: 56.25%;
   }
   .cds--col-lg-10 {
     display: block;
-    max-width: 62.5%;
     flex: 0 0 62.5%;
+    max-inline-size: 62.5%;
   }
   .cds--col-lg-11 {
     display: block;
-    max-width: 68.75%;
     flex: 0 0 68.75%;
+    max-inline-size: 68.75%;
   }
   .cds--col-lg-12 {
     display: block;
-    max-width: 75%;
     flex: 0 0 75%;
+    max-inline-size: 75%;
   }
   .cds--col-lg-13 {
     display: block;
-    max-width: 81.25%;
     flex: 0 0 81.25%;
+    max-inline-size: 81.25%;
   }
   .cds--col-lg-14 {
     display: block;
-    max-width: 87.5%;
     flex: 0 0 87.5%;
+    max-inline-size: 87.5%;
   }
   .cds--col-lg-15 {
     display: block;
-    max-width: 93.75%;
     flex: 0 0 93.75%;
+    max-inline-size: 93.75%;
   }
   .cds--col-lg-16 {
     display: block;
-    max-width: 100%;
     flex: 0 0 100%;
+    max-inline-size: 100%;
   }
   .cds--offset-lg-0 {
-    margin-left: 0;
+    margin-inline-start: 0;
   }
   .cds--offset-lg-1 {
-    margin-left: 6.25%;
+    margin-inline-start: 6.25%;
   }
   .cds--offset-lg-2 {
-    margin-left: 12.5%;
+    margin-inline-start: 12.5%;
   }
   .cds--offset-lg-3 {
-    margin-left: 18.75%;
+    margin-inline-start: 18.75%;
   }
   .cds--offset-lg-4 {
-    margin-left: 25%;
+    margin-inline-start: 25%;
   }
   .cds--offset-lg-5 {
-    margin-left: 31.25%;
+    margin-inline-start: 31.25%;
   }
   .cds--offset-lg-6 {
-    margin-left: 37.5%;
+    margin-inline-start: 37.5%;
   }
   .cds--offset-lg-7 {
-    margin-left: 43.75%;
+    margin-inline-start: 43.75%;
   }
   .cds--offset-lg-8 {
-    margin-left: 50%;
+    margin-inline-start: 50%;
   }
   .cds--offset-lg-9 {
-    margin-left: 56.25%;
+    margin-inline-start: 56.25%;
   }
   .cds--offset-lg-10 {
-    margin-left: 62.5%;
+    margin-inline-start: 62.5%;
   }
   .cds--offset-lg-11 {
-    margin-left: 68.75%;
+    margin-inline-start: 68.75%;
   }
   .cds--offset-lg-12 {
-    margin-left: 75%;
+    margin-inline-start: 75%;
   }
   .cds--offset-lg-13 {
-    margin-left: 81.25%;
+    margin-inline-start: 81.25%;
   }
   .cds--offset-lg-14 {
-    margin-left: 87.5%;
+    margin-inline-start: 87.5%;
   }
   .cds--offset-lg-15 {
-    margin-left: 93.75%;
+    margin-inline-start: 93.75%;
   }
 }
 .cds--col-xlg-0 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-xlg-0, .cds--grid--condensed .cds--col-xlg-0 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-xlg-0, .cds--grid--narrow .cds--col-xlg-0 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-xlg-1 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-xlg-1, .cds--grid--condensed .cds--col-xlg-1 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-xlg-1, .cds--grid--narrow .cds--col-xlg-1 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-xlg-2 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-xlg-2, .cds--grid--condensed .cds--col-xlg-2 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-xlg-2, .cds--grid--narrow .cds--col-xlg-2 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-xlg-3 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-xlg-3, .cds--grid--condensed .cds--col-xlg-3 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-xlg-3, .cds--grid--narrow .cds--col-xlg-3 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-xlg-4 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-xlg-4, .cds--grid--condensed .cds--col-xlg-4 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-xlg-4, .cds--grid--narrow .cds--col-xlg-4 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-xlg-5 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-xlg-5, .cds--grid--condensed .cds--col-xlg-5 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-xlg-5, .cds--grid--narrow .cds--col-xlg-5 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-xlg-6 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-xlg-6, .cds--grid--condensed .cds--col-xlg-6 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-xlg-6, .cds--grid--narrow .cds--col-xlg-6 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-xlg-7 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-xlg-7, .cds--grid--condensed .cds--col-xlg-7 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-xlg-7, .cds--grid--narrow .cds--col-xlg-7 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-xlg-8 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-xlg-8, .cds--grid--condensed .cds--col-xlg-8 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-xlg-8, .cds--grid--narrow .cds--col-xlg-8 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-xlg-9 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-xlg-9, .cds--grid--condensed .cds--col-xlg-9 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-xlg-9, .cds--grid--narrow .cds--col-xlg-9 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-xlg-10 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-xlg-10, .cds--grid--condensed .cds--col-xlg-10 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-xlg-10, .cds--grid--narrow .cds--col-xlg-10 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-xlg-11 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-xlg-11, .cds--grid--condensed .cds--col-xlg-11 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-xlg-11, .cds--grid--narrow .cds--col-xlg-11 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-xlg-12 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-xlg-12, .cds--grid--condensed .cds--col-xlg-12 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-xlg-12, .cds--grid--narrow .cds--col-xlg-12 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-xlg-13 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-xlg-13, .cds--grid--condensed .cds--col-xlg-13 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-xlg-13, .cds--grid--narrow .cds--col-xlg-13 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-xlg-14 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-xlg-14, .cds--grid--condensed .cds--col-xlg-14 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-xlg-14, .cds--grid--narrow .cds--col-xlg-14 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-xlg-15 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-xlg-15, .cds--grid--condensed .cds--col-xlg-15 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-xlg-15, .cds--grid--narrow .cds--col-xlg-15 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-xlg-16 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-xlg-16, .cds--grid--condensed .cds--col-xlg-16 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-xlg-16, .cds--grid--narrow .cds--col-xlg-16 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-xlg,
 .cds--col-xlg--auto {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-xlg, .cds--grid--condensed .cds--col-xlg,
 .cds--row--condensed .cds--col-xlg--auto,
 .cds--grid--condensed .cds--col-xlg--auto {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-xlg, .cds--grid--narrow .cds--col-xlg,
 .cds--row--narrow .cds--col-xlg--auto,
 .cds--grid--narrow .cds--col-xlg--auto {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 @media (min-width: 82rem) {
   .cds--col,
   .cds--col-xlg {
-    max-width: 100%;
     flex-basis: 0;
     flex-grow: 1;
+    max-inline-size: 100%;
   }
   .cds--col--auto,
   .cds--col-xlg--auto {
-    width: auto;
-    max-width: 100%;
     flex: 1 0 0%;
+    inline-size: auto;
+    max-inline-size: 100%;
   }
   .cds--col-xlg-0 {
     display: none;
   }
   .cds--col-xlg-1 {
     display: block;
-    max-width: 6.25%;
     flex: 0 0 6.25%;
+    max-inline-size: 6.25%;
   }
   .cds--col-xlg-2 {
     display: block;
-    max-width: 12.5%;
     flex: 0 0 12.5%;
+    max-inline-size: 12.5%;
   }
   .cds--col-xlg-3 {
     display: block;
-    max-width: 18.75%;
     flex: 0 0 18.75%;
+    max-inline-size: 18.75%;
   }
   .cds--col-xlg-4 {
     display: block;
-    max-width: 25%;
     flex: 0 0 25%;
+    max-inline-size: 25%;
   }
   .cds--col-xlg-5 {
     display: block;
-    max-width: 31.25%;
     flex: 0 0 31.25%;
+    max-inline-size: 31.25%;
   }
   .cds--col-xlg-6 {
     display: block;
-    max-width: 37.5%;
     flex: 0 0 37.5%;
+    max-inline-size: 37.5%;
   }
   .cds--col-xlg-7 {
     display: block;
-    max-width: 43.75%;
     flex: 0 0 43.75%;
+    max-inline-size: 43.75%;
   }
   .cds--col-xlg-8 {
     display: block;
-    max-width: 50%;
     flex: 0 0 50%;
+    max-inline-size: 50%;
   }
   .cds--col-xlg-9 {
     display: block;
-    max-width: 56.25%;
     flex: 0 0 56.25%;
+    max-inline-size: 56.25%;
   }
   .cds--col-xlg-10 {
     display: block;
-    max-width: 62.5%;
     flex: 0 0 62.5%;
+    max-inline-size: 62.5%;
   }
   .cds--col-xlg-11 {
     display: block;
-    max-width: 68.75%;
     flex: 0 0 68.75%;
+    max-inline-size: 68.75%;
   }
   .cds--col-xlg-12 {
     display: block;
-    max-width: 75%;
     flex: 0 0 75%;
+    max-inline-size: 75%;
   }
   .cds--col-xlg-13 {
     display: block;
-    max-width: 81.25%;
     flex: 0 0 81.25%;
+    max-inline-size: 81.25%;
   }
   .cds--col-xlg-14 {
     display: block;
-    max-width: 87.5%;
     flex: 0 0 87.5%;
+    max-inline-size: 87.5%;
   }
   .cds--col-xlg-15 {
     display: block;
-    max-width: 93.75%;
     flex: 0 0 93.75%;
+    max-inline-size: 93.75%;
   }
   .cds--col-xlg-16 {
     display: block;
-    max-width: 100%;
     flex: 0 0 100%;
+    max-inline-size: 100%;
   }
   .cds--offset-xlg-0 {
-    margin-left: 0;
+    margin-inline-start: 0;
   }
   .cds--offset-xlg-1 {
-    margin-left: 6.25%;
+    margin-inline-start: 6.25%;
   }
   .cds--offset-xlg-2 {
-    margin-left: 12.5%;
+    margin-inline-start: 12.5%;
   }
   .cds--offset-xlg-3 {
-    margin-left: 18.75%;
+    margin-inline-start: 18.75%;
   }
   .cds--offset-xlg-4 {
-    margin-left: 25%;
+    margin-inline-start: 25%;
   }
   .cds--offset-xlg-5 {
-    margin-left: 31.25%;
+    margin-inline-start: 31.25%;
   }
   .cds--offset-xlg-6 {
-    margin-left: 37.5%;
+    margin-inline-start: 37.5%;
   }
   .cds--offset-xlg-7 {
-    margin-left: 43.75%;
+    margin-inline-start: 43.75%;
   }
   .cds--offset-xlg-8 {
-    margin-left: 50%;
+    margin-inline-start: 50%;
   }
   .cds--offset-xlg-9 {
-    margin-left: 56.25%;
+    margin-inline-start: 56.25%;
   }
   .cds--offset-xlg-10 {
-    margin-left: 62.5%;
+    margin-inline-start: 62.5%;
   }
   .cds--offset-xlg-11 {
-    margin-left: 68.75%;
+    margin-inline-start: 68.75%;
   }
   .cds--offset-xlg-12 {
-    margin-left: 75%;
+    margin-inline-start: 75%;
   }
   .cds--offset-xlg-13 {
-    margin-left: 81.25%;
+    margin-inline-start: 81.25%;
   }
   .cds--offset-xlg-14 {
-    margin-left: 87.5%;
+    margin-inline-start: 87.5%;
   }
   .cds--offset-xlg-15 {
-    margin-left: 93.75%;
+    margin-inline-start: 93.75%;
   }
 }
 .cds--col-max-0 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-max-0, .cds--grid--condensed .cds--col-max-0 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-max-0, .cds--grid--narrow .cds--col-max-0 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-max-1 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-max-1, .cds--grid--condensed .cds--col-max-1 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-max-1, .cds--grid--narrow .cds--col-max-1 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-max-2 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-max-2, .cds--grid--condensed .cds--col-max-2 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-max-2, .cds--grid--narrow .cds--col-max-2 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-max-3 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-max-3, .cds--grid--condensed .cds--col-max-3 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-max-3, .cds--grid--narrow .cds--col-max-3 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-max-4 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-max-4, .cds--grid--condensed .cds--col-max-4 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-max-4, .cds--grid--narrow .cds--col-max-4 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-max-5 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-max-5, .cds--grid--condensed .cds--col-max-5 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-max-5, .cds--grid--narrow .cds--col-max-5 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-max-6 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-max-6, .cds--grid--condensed .cds--col-max-6 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-max-6, .cds--grid--narrow .cds--col-max-6 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-max-7 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-max-7, .cds--grid--condensed .cds--col-max-7 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-max-7, .cds--grid--narrow .cds--col-max-7 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-max-8 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-max-8, .cds--grid--condensed .cds--col-max-8 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-max-8, .cds--grid--narrow .cds--col-max-8 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-max-9 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-max-9, .cds--grid--condensed .cds--col-max-9 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-max-9, .cds--grid--narrow .cds--col-max-9 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-max-10 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-max-10, .cds--grid--condensed .cds--col-max-10 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-max-10, .cds--grid--narrow .cds--col-max-10 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-max-11 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-max-11, .cds--grid--condensed .cds--col-max-11 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-max-11, .cds--grid--narrow .cds--col-max-11 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-max-12 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-max-12, .cds--grid--condensed .cds--col-max-12 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-max-12, .cds--grid--narrow .cds--col-max-12 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-max-13 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-max-13, .cds--grid--condensed .cds--col-max-13 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-max-13, .cds--grid--narrow .cds--col-max-13 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-max-14 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-max-14, .cds--grid--condensed .cds--col-max-14 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-max-14, .cds--grid--narrow .cds--col-max-14 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-max-15 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-max-15, .cds--grid--condensed .cds--col-max-15 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-max-15, .cds--grid--narrow .cds--col-max-15 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-max-16 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-max-16, .cds--grid--condensed .cds--col-max-16 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-max-16, .cds--grid--narrow .cds--col-max-16 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-max,
 .cds--col-max--auto {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-max, .cds--grid--condensed .cds--col-max,
 .cds--row--condensed .cds--col-max--auto,
 .cds--grid--condensed .cds--col-max--auto {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-max, .cds--grid--narrow .cds--col-max,
 .cds--row--narrow .cds--col-max--auto,
 .cds--grid--narrow .cds--col-max--auto {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 @media (min-width: 99rem) {
   .cds--col,
   .cds--col-max {
-    max-width: 100%;
     flex-basis: 0;
     flex-grow: 1;
+    max-inline-size: 100%;
   }
   .cds--col--auto,
   .cds--col-max--auto {
-    width: auto;
-    max-width: 100%;
     flex: 1 0 0%;
+    inline-size: auto;
+    max-inline-size: 100%;
   }
   .cds--col-max-0 {
     display: none;
   }
   .cds--col-max-1 {
     display: block;
-    max-width: 6.25%;
     flex: 0 0 6.25%;
+    max-inline-size: 6.25%;
   }
   .cds--col-max-2 {
     display: block;
-    max-width: 12.5%;
     flex: 0 0 12.5%;
+    max-inline-size: 12.5%;
   }
   .cds--col-max-3 {
     display: block;
-    max-width: 18.75%;
     flex: 0 0 18.75%;
+    max-inline-size: 18.75%;
   }
   .cds--col-max-4 {
     display: block;
-    max-width: 25%;
     flex: 0 0 25%;
+    max-inline-size: 25%;
   }
   .cds--col-max-5 {
     display: block;
-    max-width: 31.25%;
     flex: 0 0 31.25%;
+    max-inline-size: 31.25%;
   }
   .cds--col-max-6 {
     display: block;
-    max-width: 37.5%;
     flex: 0 0 37.5%;
+    max-inline-size: 37.5%;
   }
   .cds--col-max-7 {
     display: block;
-    max-width: 43.75%;
     flex: 0 0 43.75%;
+    max-inline-size: 43.75%;
   }
   .cds--col-max-8 {
     display: block;
-    max-width: 50%;
     flex: 0 0 50%;
+    max-inline-size: 50%;
   }
   .cds--col-max-9 {
     display: block;
-    max-width: 56.25%;
     flex: 0 0 56.25%;
+    max-inline-size: 56.25%;
   }
   .cds--col-max-10 {
     display: block;
-    max-width: 62.5%;
     flex: 0 0 62.5%;
+    max-inline-size: 62.5%;
   }
   .cds--col-max-11 {
     display: block;
-    max-width: 68.75%;
     flex: 0 0 68.75%;
+    max-inline-size: 68.75%;
   }
   .cds--col-max-12 {
     display: block;
-    max-width: 75%;
     flex: 0 0 75%;
+    max-inline-size: 75%;
   }
   .cds--col-max-13 {
     display: block;
-    max-width: 81.25%;
     flex: 0 0 81.25%;
+    max-inline-size: 81.25%;
   }
   .cds--col-max-14 {
     display: block;
-    max-width: 87.5%;
     flex: 0 0 87.5%;
+    max-inline-size: 87.5%;
   }
   .cds--col-max-15 {
     display: block;
-    max-width: 93.75%;
     flex: 0 0 93.75%;
+    max-inline-size: 93.75%;
   }
   .cds--col-max-16 {
     display: block;
-    max-width: 100%;
     flex: 0 0 100%;
+    max-inline-size: 100%;
   }
   .cds--offset-max-0 {
-    margin-left: 0;
+    margin-inline-start: 0;
   }
   .cds--offset-max-1 {
-    margin-left: 6.25%;
+    margin-inline-start: 6.25%;
   }
   .cds--offset-max-2 {
-    margin-left: 12.5%;
+    margin-inline-start: 12.5%;
   }
   .cds--offset-max-3 {
-    margin-left: 18.75%;
+    margin-inline-start: 18.75%;
   }
   .cds--offset-max-4 {
-    margin-left: 25%;
+    margin-inline-start: 25%;
   }
   .cds--offset-max-5 {
-    margin-left: 31.25%;
+    margin-inline-start: 31.25%;
   }
   .cds--offset-max-6 {
-    margin-left: 37.5%;
+    margin-inline-start: 37.5%;
   }
   .cds--offset-max-7 {
-    margin-left: 43.75%;
+    margin-inline-start: 43.75%;
   }
   .cds--offset-max-8 {
-    margin-left: 50%;
+    margin-inline-start: 50%;
   }
   .cds--offset-max-9 {
-    margin-left: 56.25%;
+    margin-inline-start: 56.25%;
   }
   .cds--offset-max-10 {
-    margin-left: 62.5%;
+    margin-inline-start: 62.5%;
   }
   .cds--offset-max-11 {
-    margin-left: 68.75%;
+    margin-inline-start: 68.75%;
   }
   .cds--offset-max-12 {
-    margin-left: 75%;
+    margin-inline-start: 75%;
   }
   .cds--offset-max-13 {
-    margin-left: 81.25%;
+    margin-inline-start: 81.25%;
   }
   .cds--offset-max-14 {
-    margin-left: 87.5%;
+    margin-inline-start: 87.5%;
   }
   .cds--offset-max-15 {
-    margin-left: 93.75%;
+    margin-inline-start: 93.75%;
   }
 }
 .cds--no-gutter,
 .cds--row.cds--no-gutter [class*=cds--col] {
-  padding-right: 0;
-  padding-left: 0;
+  padding-inline: 0;
 }
 
 .cds--no-gutter--start,
 .cds--row.cds--no-gutter--start [class*=cds--col] {
-  padding-left: 0;
+  padding-inline-start: 0;
 }
 
 .cds--no-gutter--end,
 .cds--row.cds--no-gutter--end [class*=cds--col] {
-  padding-right: 0;
+  padding-inline-end: 0;
 }
 
 .cds--hang--start {
-  padding-left: 1rem;
+  padding-inline-start: 1rem;
 }
 
 .cds--hang--end {
-  padding-right: 1rem;
+  padding-inline-end: 1rem;
 }
 
 .c4p--action-bar.c4p--action-bar {
@@ -10692,9 +10537,7 @@ button.c4p--add-select__global-filter-toggle--open {
   top: 0;
   right: 0;
   bottom: 0;
-  width: calc(
-    1rem + 2rem + 1rem
-  );
+  width: calc(1rem + 2rem + 1rem);
 }
 
 .c4p--options-tile__toggle {
@@ -10709,12 +10552,12 @@ button.c4p--add-select__global-filter-toggle--open {
 .c4p--options-tile__toggle .cds--toggle__label-text {
   position: absolute;
   overflow: hidden;
-  width: 1px;
-  height: 1px;
   padding: 0;
   border: 0;
   margin: -1px;
+  block-size: 1px;
   clip: rect(0, 0, 0, 0);
+  inline-size: 1px;
   visibility: inherit;
   white-space: nowrap;
 }
@@ -11558,8 +11401,7 @@ button.c4p--add-select__global-filter-toggle--open {
 .c4p--datagrid__simple-body {
   position: relative;
   display: table;
-  overflow-x: hidden;
-  overflow-y: auto;
+  overflow: hidden auto;
   scrollbar-width: thin;
 }
 
@@ -11651,9 +11493,7 @@ button.c4p--add-select__global-filter-toggle--open {
   /* stylelint-disable-next-line carbon/layout-token-use */
   top: var(--c4p--datagrid--row-height);
   /* stylelint-disable-next-line carbon/layout-token-use */
-  left: calc(
-      var(--c4p--datagrid--indicator-offset-amount) + 1rem
-    );
+  left: calc(var(--c4p--datagrid--indicator-offset-amount) + 1rem);
   width: 1px;
   height: var(--c4p--datagrid--indicator-height);
   border-left: 1px solid var(--cds-border-subtle-selected-01, #c6c6c6);
@@ -12248,6 +12088,10 @@ button.c4p--add-select__global-filter-toggle--open {
   justify-content: center;
 }
 
+.c4p--datagrid .c4p--datagrid__row-size__row-settings-trigger--open.cds--btn--ghost {
+  background-color: var(--cds-layer-02, #ffffff);
+}
+
 /*
 * Licensed Materials - Property of IBM
 * 5724-Q36
@@ -12764,6 +12608,7 @@ th.c4p--datagrid__select-all-toggle-on.button {
   color: var(--cds-text-secondary, #525252);
   cursor: pointer;
   outline: 0;
+  /* stylelint-disable-next-line */
 }
 .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button .c4p--datagrid__label-icon {
   height: 1rem;
@@ -12783,13 +12628,10 @@ th.c4p--datagrid__select-all-toggle-on.button {
 .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--selection {
   justify-content: flex-start;
 }
-.c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button:not(.c4p--datagrid__inline-edit-button--edit-less-than-half-of-total-cols) {
-  /* stylelint-disable-next-line */
-}
-.c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button:not(.c4p--datagrid__inline-edit-button--edit-less-than-half-of-total-cols) .c4p--datagrid__inline-edit-button-icon {
+.c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button .c4p--datagrid__inline-edit-button-icon {
   display: none;
 }
-.c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button:not(.c4p--datagrid__inline-edit-button--edit-less-than-half-of-total-cols):hover .c4p--datagrid__inline-edit-button-icon {
+.c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button:hover .c4p--datagrid__inline-edit-button-icon, .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--active .c4p--datagrid__inline-edit-button-icon {
   display: block;
 }
 
@@ -12971,7 +12813,7 @@ th.c4p--datagrid__select-all-toggle-on.button {
   position: absolute;
   top: 0;
   left: 0.125rem;
-  width: calc(100% - (0.125rem * 2));
+  width: calc(100% - 0.125rem * 2);
   height: 0.125rem;
   background-color: var(--cds-layer-01, #f4f4f4);
   content: "";
@@ -12981,7 +12823,7 @@ th.c4p--datagrid__select-all-toggle-on.button {
   position: absolute;
   top: 0.125rem;
   left: 0.5rem;
-  width: calc(100% - (0.5rem * 2));
+  width: calc(100% - 0.5rem * 2);
   height: 1px;
   background-color: var(--cds-layer-accent-01, #e0e0e0);
   content: "";
@@ -13075,29 +12917,25 @@ th.c4p--datagrid__select-all-toggle-on.button {
   --cds-grid-gutter-end: calc(var(--cds-grid-gutter) / 2);
   --cds-grid-column-hang: calc(var(--cds-grid-gutter) / 2);
   display: grid;
-  width: 100%;
-  max-width: 99rem;
-  padding-right: var(--cds-grid-margin);
-  padding-left: var(--cds-grid-margin);
-  margin-right: auto;
-  margin-left: auto;
   grid-template-columns: repeat(var(--cds-grid-columns), minmax(0, 1fr));
+  inline-size: 100%;
+  margin-inline: auto;
+  max-inline-size: 99rem;
+  padding-inline: var(--cds-grid-margin);
 }
 
 .cds--css-grid--full-width {
-  max-width: 100%;
+  max-inline-size: 100%;
 }
 
 .cds--css-grid-column {
   --cds-grid-mode-start: var(--cds-grid-gutter-start);
   --cds-grid-mode-end: var(--cds-grid-gutter-end);
-  margin-right: var(--cds-grid-gutter-end);
-  margin-left: var(--cds-grid-gutter-start);
+  margin-inline: var(--cds-grid-gutter-start) var(--cds-grid-gutter-end);
 }
 
 [dir=rtl] .cds--css-grid-column {
-  margin-right: var(--cds-grid-gutter-start);
-  margin-left: var(--cds-grid-gutter-end);
+  margin-inline: var(--cds-grid-gutter-end) var(--cds-grid-gutter-start);
 }
 
 .cds--css-grid--narrow {
@@ -13111,14 +12949,12 @@ th.c4p--datagrid__select-all-toggle-on.button {
 
 .cds--subgrid {
   display: grid;
-  margin-right: calc(var(--cds-grid-mode-end) * -1);
-  margin-left: calc(var(--cds-grid-mode-start) * -1);
   grid-template-columns: repeat(var(--cds-grid-columns), minmax(0, 1fr));
+  margin-inline: calc(var(--cds-grid-mode-start) * -1) calc(var(--cds-grid-mode-end) * -1);
 }
 
 [dir=rtl] .cds--subgrid {
-  margin-right: calc(var(--cds-grid-mode-start) * -1);
-  margin-left: calc(var(--cds-grid-mode-end) * -1);
+  margin-inline: calc(var(--cds-grid-mode-end) * -1) calc(var(--cds-grid-mode-start) * -1);
 }
 
 .cds--subgrid--wide {
@@ -13140,12 +12976,11 @@ th.c4p--datagrid__select-all-toggle-on.button {
 }
 
 .cds--grid-column-hang {
-  margin-left: var(--cds-grid-column-hang);
+  margin-inline-start: var(--cds-grid-column-hang);
 }
 
 [dir=rtl] .cds--grid-column-hang {
-  margin-right: var(--cds-grid-column-hang);
-  margin-left: initial;
+  margin-inline: initial var(--cds-grid-column-hang);
 }
 
 .cds--col-span-0 {
@@ -14542,12 +14377,12 @@ th.c4p--datagrid__select-all-toggle-on.button {
 .cds--visually-hidden {
   position: absolute;
   overflow: hidden;
-  width: 1px;
-  height: 1px;
   padding: 0;
   border: 0;
   margin: -1px;
+  block-size: 1px;
   clip: rect(0, 0, 0, 0);
+  inline-size: 1px;
   visibility: inherit;
   white-space: nowrap;
 }
@@ -14684,47 +14519,47 @@ th.c4p--datagrid__select-all-toggle-on.button {
 .cds--side-nav {
   position: fixed;
   z-index: 8000;
-  top: 0;
-  bottom: 0;
-  left: 0;
   overflow: hidden;
-  width: 3rem;
-  max-width: 16rem;
   background-color: var(--cds-background, #ffffff);
   color: var(--cds-text-secondary, #525252);
+  inline-size: 3rem;
+  inset-block-end: 0;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  max-inline-size: 16rem;
   transition: width 0.11s cubic-bezier(0.2, 0, 1, 0.9);
   will-change: width;
 }
 
 .cds--side-nav--ux {
-  top: 3rem;
-  width: 16rem;
+  inline-size: 16rem;
+  inset-block-start: 3rem;
 }
 
 @media (max-width: 65.98rem) {
   .cds--side-nav--ux {
-    width: 0;
+    inline-size: 0;
   }
 }
 .cds--side-nav--rail {
-  width: 3rem;
+  inline-size: 3rem;
 }
 
 .cds--side-nav--hidden {
-  width: 0;
+  inline-size: 0;
 }
 
 .cds--side-nav--expanded {
-  width: 16rem;
+  inline-size: 16rem;
 }
 
 .cds--side-nav__overlay {
   position: fixed;
-  top: 3rem;
-  left: 0;
-  width: 0;
-  height: 0;
   background-color: transparent;
+  block-size: 0;
+  inline-size: 0;
+  inset-block-start: 3rem;
+  inset-inline-start: 0;
   opacity: 0;
   transition: opacity 300ms cubic-bezier(0.5, 0, 0.1, 1), background-color 300ms cubic-bezier(0.5, 0, 0.1, 1);
 }
@@ -14732,24 +14567,24 @@ th.c4p--datagrid__select-all-toggle-on.button {
 @media (max-width: 65.98rem) {
   .cds--side-nav__overlay-active {
     z-index: 6000;
-    width: 100vw;
-    height: 100vh;
     background-color: var(--cds-overlay, rgba(22, 22, 22, 0.5));
+    block-size: 100vh;
+    inline-size: 100vw;
     opacity: 1;
     transition: opacity 300ms cubic-bezier(0.5, 0, 0.1, 1), background-color 300ms cubic-bezier(0.5, 0, 0.1, 1);
   }
 }
 .cds--header ~ .cds--side-nav {
-  top: 3rem;
-  height: calc(100% - 48px);
+  block-size: calc(100% - 48px);
+  inset-block-start: 3rem;
 }
 
 .cds--side-nav--fixed {
-  width: 16rem;
+  inline-size: 16rem;
 }
 
 .cds--side-nav--collapsed {
-  width: 16rem;
+  inline-size: 16rem;
   transform: translateX(-16rem);
 }
 
@@ -14787,13 +14622,13 @@ th.c4p--datagrid__select-all-toggle-on.button {
 
 .cds--side-nav__item {
   overflow: hidden;
-  width: auto;
-  height: auto;
+  block-size: auto;
+  inline-size: auto;
 }
 
 .cds--side-nav--ux .cds--side-nav__item {
-  width: auto;
-  height: auto;
+  block-size: auto;
+  inline-size: auto;
 }
 
 .cds--side-nav__item:not(.cds--side-nav__item--active):hover .cds--side-nav__item:not(.cds--side-nav__item--active) > .cds--side-nav__submenu:hover,
@@ -14811,16 +14646,20 @@ th.c4p--datagrid__select-all-toggle-on.button {
 }
 
 .cds--side-nav__item--large {
-  height: 3rem;
+  block-size: 3rem;
 }
 
 .cds--side-nav__divider {
-  height: 1px;
   margin: 0.5rem 1rem;
   background-color: var(--cds-border-subtle);
+  block-size: 1px;
   list-style-type: none;
 }
 
+.cds--side-nav__divider hr {
+  border: none;
+}
+
 .cds--side-nav__submenu {
   box-sizing: border-box;
   padding: 0;
@@ -14836,7 +14675,7 @@ th.c4p--datagrid__select-all-toggle-on.button {
   background: none;
   cursor: pointer;
   text-align: start;
-  width: 100%;
+  inline-size: 100%;
   font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
   font-weight: var(--cds-heading-compact-01-font-weight, 600);
   line-height: var(--cds-heading-compact-01-line-height, 1.28572);
@@ -14844,9 +14683,9 @@ th.c4p--datagrid__select-all-toggle-on.button {
   outline: 2px solid transparent;
   outline-offset: -2px;
   display: flex;
-  height: 2rem;
   align-items: center;
   padding: 0 1rem;
+  block-size: 2rem;
   color: var(--cds-text-secondary, #525252);
   transition: color 110ms, background-color 110ms, outline 110ms;
   user-select: none;
@@ -14881,7 +14720,7 @@ th.c4p--datagrid__select-all-toggle-on.button {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  text-align: left;
+  text-align: start;
 }
 
 .cds--side-nav__icon.cds--side-nav__submenu-chevron {
@@ -14891,8 +14730,8 @@ th.c4p--datagrid__select-all-toggle-on.button {
 }
 
 .cds--side-nav__submenu-chevron > svg {
-  width: 1rem;
-  height: 1rem;
+  block-size: 1rem;
+  inline-size: 1rem;
   transition: transform 110ms;
 }
 
@@ -14901,7 +14740,7 @@ th.c4p--datagrid__select-all-toggle-on.button {
 }
 
 .cds--side-nav__item--large .cds--side-nav__submenu {
-  height: 3rem;
+  block-size: 3rem;
 }
 
 .cds--side-nav__item--active .cds--side-nav__submenu:hover {
@@ -14917,12 +14756,12 @@ th.c4p--datagrid__select-all-toggle-on.button {
 
 .cds--side-nav__item--active .cds--side-nav__submenu[aria-expanded=false]::before {
   position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  width: 3px;
   background-color: var(--cds-border-interactive, #0f62fe);
   content: "";
+  inline-size: 3px;
+  inset-block-end: 0;
+  inset-block-start: 0;
+  inset-inline-start: 0;
 }
 
 .cds--side-nav__item--active .cds--side-nav__submenu-title {
@@ -14943,7 +14782,7 @@ th.c4p--datagrid__select-all-toggle-on.button {
   font-size: 100%;
   vertical-align: baseline;
   display: block;
-  max-height: 0;
+  max-block-size: 0;
   visibility: hidden;
 }
 
@@ -14954,19 +14793,19 @@ th.c4p--datagrid__select-all-toggle-on.button {
 }
 
 .cds--side-nav__submenu[aria-expanded=true] + .cds--side-nav__menu {
-  max-height: 93.75rem;
+  max-block-size: 93.75rem;
   visibility: inherit;
 }
 
 .cds--side-nav__menu a.cds--side-nav__link {
-  height: 2rem;
-  min-height: 2rem;
-  padding-left: 2rem;
+  block-size: 2rem;
   font-weight: 400;
+  min-block-size: 2rem;
+  padding-inline-start: 2rem;
 }
 
 .cds--side-nav__item.cds--side-nav__item--icon a.cds--side-nav__link {
-  padding-left: 4.5rem;
+  padding-inline-start: 4.5rem;
 }
 
 .cds--side-nav__menu a.cds--side-nav__link--current,
@@ -14993,15 +14832,15 @@ a.cds--side-nav__link,
   letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
   position: relative;
   display: flex;
-  min-height: 2rem;
   align-items: center;
   padding: 0 1rem;
+  min-block-size: 2rem;
   text-decoration: none;
   transition: color 110ms, background-color 110ms, outline 110ms;
 }
 
 .cds--side-nav__item--large a.cds--side-nav__link {
-  height: 3rem;
+  block-size: 3rem;
 }
 
 a.cds--side-nav__link > .cds--side-nav__link-text,
@@ -15042,12 +14881,12 @@ a.cds--side-nav__link--current .cds--side-nav__link-text {
 a.cds--side-nav__link[aria-current=page]::before,
 a.cds--side-nav__link--current::before {
   position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  width: 3px;
   background-color: var(--cds-border-interactive, #0f62fe);
   content: "";
+  inline-size: 3px;
+  inset-block-end: 0;
+  inset-block-start: 0;
+  inset-inline-start: 0;
 }
 
 .cds--side-nav__icon {
@@ -15058,13 +14897,13 @@ a.cds--side-nav__link--current::before {
 }
 
 .cds--side-nav__icon:not(.cds--side-nav__submenu-chevron) {
-  margin-right: 1.5rem;
+  margin-inline-end: 1.5rem;
 }
 
 .cds--side-nav__icon > svg {
-  width: 1rem;
-  height: 1rem;
+  block-size: 1rem;
   fill: var(--cds-icon-secondary, #525252);
+  inline-size: 1rem;
 }
 
 .cds--side-nav__icon > svg.cds--side-nav-collapse-icon {
@@ -15081,11 +14920,11 @@ a.cds--side-nav__link--current::before {
 
 .cds--side-nav--fixed a.cds--side-nav__link,
 .cds--side-nav--fixed .cds--side-nav__submenu {
-  padding-left: 1rem;
+  padding-inline-start: 1rem;
 }
 
 .cds--side-nav--fixed .cds--side-nav__item:not(.cds--side-nav__item--icon) .cds--side-nav__menu a.cds--side-nav__link {
-  padding-left: 2rem;
+  padding-inline-start: 2rem;
 }
 
 @media (max-width: 65.98rem) {
@@ -15114,17 +14953,17 @@ a.cds--side-nav__link--current::before {
   .cds--side-nav__header-navigation {
     position: relative;
     display: block;
-    margin-bottom: 2rem;
+    margin-block-end: 2rem;
   }
 }
 .cds--side-nav__header-divider::after {
   position: absolute;
-  bottom: -1rem;
-  left: 1rem;
-  width: calc(100% - 32px);
-  height: 0.0625rem;
   background: var(--cds-border-subtle);
+  block-size: 0.0625rem;
   content: "";
+  inline-size: calc(100% - 32px);
+  inset-block-end: -1rem;
+  inset-inline-start: 1rem;
 }
 
 .cds--side-nav a.cds--header__menu-item {
@@ -15138,21 +14977,21 @@ a.cds--side-nav__link--current::before {
 }
 
 .cds--side-nav .cds--header__menu-title[aria-expanded=true] + .cds--header__menu {
-  bottom: inherit;
-  width: 100%;
   padding: 0;
   background-color: transparent;
   box-shadow: none;
+  inline-size: 100%;
+  inset-block-end: inherit;
   transform: none;
 }
 
 .cds--side-nav .cds--header__menu-title[aria-expanded=true] + .cds--header__menu li {
-  width: 100%;
+  inline-size: 100%;
 }
 
 .cds--side-nav .cds--header__menu-title[aria-expanded=true] + .cds--header__menu a.cds--header__menu-item {
-  padding-left: 4.25rem;
   font-weight: 400;
+  padding-inline-start: 4.25rem;
 }
 
 .cds--side-nav .cds--header__menu-title[aria-expanded=true] + .cds--header__menu a.cds--header__menu-item:hover {
@@ -15166,12 +15005,12 @@ a.cds--side-nav__link--current::before {
 
 .cds--side-nav .cds--side-nav__header-navigation a.cds--header__menu-item[aria-current=page]::after,
 .cds--side-nav .cds--side-nav__header-navigation .cds--header__menu-item--current::after {
-  width: 3px;
-  height: calc(100% + 4px);
+  block-size: calc(100% + 4px);
+  inline-size: 3px;
 }
 
 .cds--side-nav .cds--header__menu a.cds--header__menu-item {
-  height: inherit;
+  block-size: inherit;
 }
 
 .cds--side-nav a.cds--header__menu-item:hover .cds--header__menu-arrow,
@@ -15464,7 +15303,7 @@ a.cds--side-nav__link--current::before {
 }
 
 .c4p--tearsheet.c4p--tearsheet--stacked-1-of-3 .c4p--tearsheet__container {
-  max-height: calc(100% - 3rem + (2 * 1rem));
+  max-height: calc(100% - 3rem + 2 * 1rem);
 }
 
 .c4p--tearsheet .c4p--tearsheet__container--lower {
@@ -15476,7 +15315,7 @@ a.cds--side-nav__link--current::before {
 }
 
 .c4p--tearsheet.c4p--tearsheet--stacked-1-of-3 .c4p--tearsheet__container--lower {
-  max-height: calc(100% - (3rem + 2.5rem) + (2 * 1rem));
+  max-height: calc(100% - (3rem + 2.5rem) + 2 * 1rem);
 }
 
 .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__container {
@@ -15489,7 +15328,7 @@ a.cds--side-nav__link--current::before {
 
 @media (min-width: 42rem) {
   .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__container {
-    width: calc(100% - (2 * 4rem));
+    width: calc(100% - 2 * 4rem);
   }
 }
 .c4p--tearsheet.c4p--tearsheet--stacked-1-of-2.is-visible .c4p--tearsheet__container, .c4p--tearsheet.c4p--tearsheet--stacked-2-of-3.is-visible .c4p--tearsheet__container {
@@ -15901,4 +15740,215 @@ a.cds--side-nav__link--current::before {
   color: #ffffff;
 }
 
+.c4p--checklist__header {
+  display: flex;
+  padding: 1rem;
+  background-color: var(--cds-layer-01, #f4f4f4);
+  gap: 0.5rem;
+}
+
+.c4p--checklist__chart {
+  position: relative;
+  width: 2.5rem;
+  min-width: 2.5rem;
+  height: 2.5rem;
+  align-self: center;
+}
+
+.c4p--checklist__chart::after {
+  position: absolute;
+  top: 0.25rem;
+  left: 0.25rem;
+  width: 2rem;
+  height: 2rem;
+  border-radius: 50%;
+  background-color: var(--cds-layer-01, #f4f4f4);
+  content: "";
+}
+
+.c4p--checklist__titles {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.c4p--checklist__title {
+  font-size: var(--cds-productive-heading-02-font-size, 1rem);
+  font-weight: var(--cds-productive-heading-02-font-weight, 600);
+  line-height: var(--cds-productive-heading-02-line-height, 1.375);
+  letter-spacing: var(--cds-productive-heading-02-letter-spacing, 0);
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  text-overflow: ellipsis;
+}
+
+.c4p--checklist__chart-label {
+  font-size: var(--cds-label-01-font-size, 0.75rem);
+  font-weight: var(--cds-label-01-font-weight, 400);
+  line-height: var(--cds-label-01-line-height, 1.33333);
+  letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  text-overflow: ellipsis;
+  color: var(--cds-text-secondary, #525252);
+}
+
+.c4p--checklist__title + .c4p--checklist__chart-label {
+  margin-top: 0.125rem;
+}
+
+.c4p--checklist__header .cds--tooltip {
+  height: 2rem;
+  margin-top: -0.5rem;
+  margin-right: -0.5rem;
+  margin-left: auto;
+}
+
+.c4p--checklist__chevron {
+  color: var(--cds-text-primary, #161616);
+  transform: rotate(0deg);
+  transition: all 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
+  /* stylelint-disable-next-line max-nesting-depth */
+}
+@media (prefers-reduced-motion: reduce) {
+  .c4p--checklist__chevron {
+    transition: none;
+  }
+}
+
+.c4p--checklist__closed .c4p--checklist__chevron {
+  transform: rotate(-180deg);
+}
+
+.c4p--checklist__button.cds--btn--primary {
+  max-width: none;
+  min-height: auto;
+  /* stylelint-disable-next-line declaration-property-value-disallowed-list */
+  flex-shrink: unset;
+  padding: 0;
+  border: none;
+  background-color: transparent;
+  color: var(--cds-link-primary, #0f62fe);
+}
+
+.c4p--checklist__button.cds--btn--primary div {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  text-overflow: ellipsis;
+}
+
+.c4p--checklist__button.cds--btn--primary:hover {
+  background: transparent;
+  color: var(--cds-link-primary-hover, #0043ce);
+  text-decoration: underline;
+}
+
+.c4p--checklist__button.cds--btn--primary:active {
+  background: transparent;
+  color: var(--cds-text-primary, #161616);
+  text-decoration: underline;
+}
+
+.c4p--checklist__button--error {
+  /* stylelint-disable-next-line declaration-no-important */
+  color: var(--cds-text-error, #da1e28) !important;
+}
+
+.c4p--checklist__content-outer {
+  overflow: hidden;
+}
+
+.c4p--checklist__content-inner {
+  height: 100%;
+  background-color: var(--cds-layer-01, #f4f4f4);
+  transform: translate(0, 0);
+  transition: all 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
+  /* stylelint-disable-next-line max-nesting-depth */
+}
+@media (prefers-reduced-motion: reduce) {
+  .c4p--checklist__content-inner {
+    transition: none;
+  }
+}
+
+.c4p--checklist__closed .c4p--checklist__content-inner {
+  height: 0;
+  transform: translate(0, -100%);
+}
+
+.c4p--checklist__list-group {
+  padding: 1rem;
+  border-top: 1px solid var(--cds-border-subtle-01, #c6c6c6);
+}
+
+.c4p--checklist__list-title {
+  font-size: var(--cds-body-short-01-font-size, 0.875rem);
+  font-weight: var(--cds-body-short-01-font-weight, 400);
+  line-height: var(--cds-body-short-01-line-height, 1.28572);
+  letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  text-overflow: ellipsis;
+  margin-bottom: 0.5rem;
+}
+
+.c4p--checklist__list-item {
+  display: flex;
+  margin-bottom: 0.5rem;
+}
+
+.c4p--checklist__list-item:last-child {
+  margin-bottom: 0;
+}
+
+.c4p--checklist__icon {
+  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
+  margin: 0.0625rem 0.5rem 0 0;
+  color: var(--cds-link-primary, #0f62fe);
+}
+
+.c4p--checklist__icon--error {
+  color: var(--cds-support-error, #da1e28);
+}
+
+.c4p--checklist__icon--disabled {
+  color: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
+}
+
+.c4p--checklist__label {
+  font-size: var(--cds-body-short-01-font-size, 0.875rem);
+  font-weight: var(--cds-body-short-01-font-weight, 400);
+  line-height: var(--cds-body-short-01-line-height, 1.28572);
+  letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  text-overflow: ellipsis;
+}
+
+.c4p--checklist__label--checked,
+.c4p--checklist__label--disabled,
+.c4p--checklist__label--error {
+  color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
+}
+
+.c4p--checklist__footer {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  text-overflow: ellipsis;
+  padding: 0.5rem 1rem;
+  border-top: 1px solid var(--cds-border-subtle);
+}
+
 /*# sourceMappingURL=index-without-carbon.css.map */