diff --git a/.changeset/red-islands-enjoy.md b/.changeset/red-islands-enjoy.md
new file mode 100644
index 00000000000..d0a89f2812b
--- /dev/null
+++ b/.changeset/red-islands-enjoy.md
@@ -0,0 +1,9 @@
+---
+"@kaizen/components": patch
+---
+
+Fix sass deprecation warnings.
+
+Also fixes:
+- Button v1 right-to-left padding
+- TextField reversed success icon styles
diff --git a/packages/components/src/Avatar/Avatar.module.scss b/packages/components/src/Avatar/Avatar.module.scss
index 8ca15197516..e289dac9801 100644
--- a/packages/components/src/Avatar/Avatar.module.scss
+++ b/packages/components/src/Avatar/Avatar.module.scss
@@ -89,13 +89,13 @@ $avatar-xxl: 7.75rem;
 }
 
 .avatarImage {
-  .loading & {
-    display: none;
-  }
-
   width: 100%;
   height: 100%;
   object-fit: cover;
+
+  .loading & {
+    display: none;
+  }
 }
 
 .companyAvatarImage {
diff --git a/packages/components/src/Checkbox/Checkbox/Checkbox.module.scss b/packages/components/src/Checkbox/Checkbox/Checkbox.module.scss
index ad67b28aa84..29cce5f1553 100644
--- a/packages/components/src/Checkbox/Checkbox/Checkbox.module.scss
+++ b/packages/components/src/Checkbox/Checkbox/Checkbox.module.scss
@@ -10,11 +10,11 @@ $dt-color-checkbox-background-color-checked: $color-gray-500;
 
 // override bootstrap styles
 .checkbox.checkbox {
-  @include form-input-visually-hidden;
-
   width: $checkbox-size;
   height: $checkbox-size;
   margin: 0;
+
+  @include form-input-visually-hidden;
 }
 
 .checkbox:disabled {
diff --git a/packages/components/src/Filter/FilterMultiSelect/subcomponents/SelectionControlButton/SelectionControlButton.module.scss b/packages/components/src/Filter/FilterMultiSelect/subcomponents/SelectionControlButton/SelectionControlButton.module.scss
index 595e1f927f9..2f221145b4d 100644
--- a/packages/components/src/Filter/FilterMultiSelect/subcomponents/SelectionControlButton/SelectionControlButton.module.scss
+++ b/packages/components/src/Filter/FilterMultiSelect/subcomponents/SelectionControlButton/SelectionControlButton.module.scss
@@ -11,17 +11,20 @@ $focus-ring-offset: 1px;
 
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  font-family: $typography-button-secondary-font-family;
-  font-weight: $typography-button-secondary-font-weight;
-  font-size: $typography-button-secondary-font-size;
-  line-height: $typography-button-secondary-line-height;
-  letter-spacing: $typography-button-secondary-letter-spacing;
   position: relative;
-  color: $color-blue-500;
+  display: inline-flex;
+  align-items: center;
+  gap: $spacing-xs;
   border: $border-solid-border-width $border-solid-border-style;
   border-color: $border-borderless-border-color;
   border-radius: $border-solid-border-radius;
   padding: $spacing-4 $spacing-8;
+  font-weight: $typography-button-secondary-font-weight;
+  font-family: $typography-button-secondary-font-family;
+  font-size: $typography-button-secondary-font-size;
+  line-height: $typography-button-secondary-line-height;
+  letter-spacing: $typography-button-secondary-letter-spacing;
+  color: $color-blue-500;
 
   &:focus {
     outline: none;
@@ -48,10 +51,6 @@ $focus-ring-offset: 1px;
     inset: calc(-1 * #{$focus-ring-offset});
   }
 
-  display: inline-flex;
-  gap: $spacing-xs;
-  align-items: center;
-
   // TODO: copied from Calendar button since the design is not settled
   &.isDisabled {
     pointer-events: none;
diff --git a/packages/components/src/GuidanceBlock/GuidanceBlock.module.scss b/packages/components/src/GuidanceBlock/GuidanceBlock.module.scss
index 1950e4ac79f..411ab48273d 100644
--- a/packages/components/src/GuidanceBlock/GuidanceBlock.module.scss
+++ b/packages/components/src/GuidanceBlock/GuidanceBlock.module.scss
@@ -178,6 +178,10 @@ $scene-illustration-size: 300px;
   @include button-reset;
 
   cursor: pointer;
+  position: absolute;
+  top: $spacing-sm;
+  right: $spacing-sm;
+  color: $color-purple-800;
 
   .icon {
     opacity: 70%;
@@ -207,11 +211,6 @@ $scene-illustration-size: 300px;
       }
     }
   }
-
-  position: absolute;
-  top: $spacing-sm;
-  right: $spacing-sm;
-  color: $color-purple-800;
 }
 
 .default {
diff --git a/packages/components/src/Input/InputRange/InputRange.module.scss b/packages/components/src/Input/InputRange/InputRange.module.scss
index 838ece195f4..389b866054b 100644
--- a/packages/components/src/Input/InputRange/InputRange.module.scss
+++ b/packages/components/src/Input/InputRange/InputRange.module.scss
@@ -74,9 +74,9 @@ input[type="range"].ratingScaleRange {
   }
 
   &::-webkit-slider-runnable-track {
-    @include track;
-
     margin: $spacing-sm 0;
+
+    @include track;
   }
 
   &::-moz-range-track {
@@ -84,10 +84,10 @@ input[type="range"].ratingScaleRange {
   }
 
   &::-webkit-slider-thumb {
-    @include thumb;
-
     -webkit-appearance: none;
     margin-top: calc((#{$thumb-height-with-border}/ 2) * -1);
+
+    @include thumb;
   }
 
   &::-moz-range-thumb {
diff --git a/packages/components/src/Input/InputSearch/InputSearch.module.scss b/packages/components/src/Input/InputSearch/InputSearch.module.scss
index 2bacfcf0390..8557bdc8741 100644
--- a/packages/components/src/Input/InputSearch/InputSearch.module.scss
+++ b/packages/components/src/Input/InputSearch/InputSearch.module.scss
@@ -29,10 +29,6 @@ $classname--input: '.input[type="search"]';
 #{$classname--input} {
   @include form-input-reset;
 
-  @include form-input-placeholder {
-    opacity: 100%;
-  }
-
   display: flex;
   align-items: center;
   height: $input-height;
@@ -44,6 +40,10 @@ $classname--input: '.input[type="search"]';
   font-size: 1rem;
   line-height: 1.5;
 
+  @include form-input-placeholder {
+    opacity: 100%;
+  }
+
   &::-webkit-search-cancel-button {
     -webkit-appearance: none;
   }
@@ -113,14 +113,14 @@ $classname--input: '.input[type="search"]';
 // Default
 .default {
   #{$classname--input} {
+    border-color: $color-gray-500;
+    background-color: $color-white;
+    color: $color-purple-800;
+
     @include form-input-placeholder {
       color: $color-purple-800;
       opacity: $input-placeholder-opacity--default;
     }
-
-    border-color: $color-gray-500;
-    background-color: $color-white;
-    color: $color-purple-800;
   }
 
   .focusRing {
@@ -135,12 +135,12 @@ $classname--input: '.input[type="search"]';
   &:hover,
   &:focus-within {
     #{$classname--input} {
+      border-color: $color-gray-600;
+      background-color: $color-gray-200;
+
       @include form-input-placeholder {
         opacity: 100%;
       }
-
-      border-color: $color-gray-600;
-      background-color: $color-gray-200;
     }
 
     .startIconAdornment {
@@ -152,14 +152,14 @@ $classname--input: '.input[type="search"]';
 // Secondary
 .secondary {
   #{$classname--input} {
+    border-color: transparent;
+    background-color: $color-gray-200;
+    color: $color-purple-800;
+
     @include form-input-placeholder {
       color: $color-purple-800;
       opacity: $input-placeholder-opacity--default;
     }
-
-    border-color: transparent;
-    background-color: $color-gray-200;
-    color: $color-purple-800;
   }
 
   .focusRing {
@@ -174,12 +174,12 @@ $classname--input: '.input[type="search"]';
   &:hover,
   &:focus-within {
     #{$classname--input} {
+      border-color: transparent;
+      background-color: $color-gray-300;
+
       @include form-input-placeholder {
         opacity: 100%;
       }
-
-      border-color: transparent;
-      background-color: $color-gray-300;
     }
 
     .startIconAdornment {
@@ -191,13 +191,13 @@ $classname--input: '.input[type="search"]';
 // Reversed
 .reversed {
   #{$classname--input} {
+    background: rgba($color-white-rgb, 0.1);
+    color: $color-white;
+
     @include form-input-placeholder {
       color: $color-white;
       opacity: $input-placeholder-opacity--reversed;
     }
-
-    background: rgba($color-white-rgb, 0.1);
-    color: $color-white;
   }
 
   .focusRing {
diff --git a/packages/components/src/LikertScaleLegacy/LikertScaleLegacy.module.scss b/packages/components/src/LikertScaleLegacy/LikertScaleLegacy.module.scss
index b46a394a230..ef6b7bd9b53 100644
--- a/packages/components/src/LikertScaleLegacy/LikertScaleLegacy.module.scss
+++ b/packages/components/src/LikertScaleLegacy/LikertScaleLegacy.module.scss
@@ -170,6 +170,13 @@ $blue-fifth: $color-blue-500;
 .likertItem {
   margin-right: 2px;
   margin-left: 2px;
+  font-size: 1px;
+  line-height: 1;
+  padding: 0;
+  overflow-x: visible;
+  display: inline-block;
+  width: 18.5%; // 5 columns
+  position: relative;
 
   &[dir="rtl"],
   [dir="rtl"] & {
@@ -184,14 +191,6 @@ $blue-fifth: $color-blue-500;
 
   @include fill($block-height);
 
-  font-size: 1px;
-  line-height: 1;
-  padding: 0;
-  overflow-x: visible;
-  display: inline-block;
-  width: 18.5%; // 5 columns
-  position: relative;
-
   &:first-child {
     margin-right: 2px;
     margin-left: 0;
diff --git a/packages/components/src/Modal/ContextModal/ContextModal.module.scss b/packages/components/src/Modal/ContextModal/ContextModal.module.scss
index fb8d8361e16..a4fe57ea985 100644
--- a/packages/components/src/Modal/ContextModal/ContextModal.module.scss
+++ b/packages/components/src/Modal/ContextModal/ContextModal.module.scss
@@ -14,19 +14,19 @@
   }
 
   .animatingEnter & {
-    @include ca-animation(fade($from: 0, $to: 1), zoom($from: 0.5, $to: 1));
-
     animation-duration: $ca-duration-fast;
     animation-fill-mode: forwards;
     animation-timing-function: $ca-bounce-in;
+
+    @include ca-animation(fade($from: 0, $to: 1), zoom($from: 0.5, $to: 1));
   }
 
   .animatingLeave & {
-    @include ca-animation(fade($from: 1, $to: 0), zoom($from: 1, $to: 0.5));
-
     animation-duration: $ca-duration-rapid;
     animation-fill-mode: forwards;
     animation-timing-function: $ca-bounce-out;
+
+    @include ca-animation(fade($from: 1, $to: 0), zoom($from: 1, $to: 0.5));
   }
 }
 
diff --git a/packages/components/src/Modal/GenericModal/GenericModal.module.scss b/packages/components/src/Modal/GenericModal/GenericModal.module.scss
index a3c528cd5fb..d80358c58f3 100644
--- a/packages/components/src/Modal/GenericModal/GenericModal.module.scss
+++ b/packages/components/src/Modal/GenericModal/GenericModal.module.scss
@@ -14,22 +14,22 @@
 }
 
 .backdropLayer {
-  @include ca-position($start: 0, $end: 0, $top: 0, $bottom: 0);
-
   position: fixed;
   background-color: #000;
   opacity: 50%;
   z-index: $ca-z-index-modal-backdrop;
-}
 
-.scrollLayer {
   @include ca-position($start: 0, $end: 0, $top: 0, $bottom: 0);
+}
 
+.scrollLayer {
   position: fixed;
   display: flex;
   align-items: center;
   z-index: $ca-z-index-modal;
   overflow-y: auto;
+
+  @include ca-position($start: 0, $end: 0, $top: 0, $bottom: 0);
 }
 
 .modalLayer {
@@ -84,11 +84,11 @@
   }
 
   [data-modal] {
-    @include ca-animation(fade($from: 0, $to: 1), zoom($from: 0.5, $to: 1));
-
     animation-duration: $ca-duration-fast;
     animation-fill-mode: forwards;
     animation-timing-function: $ca-bounce-in;
+
+    @include ca-animation(fade($from: 0, $to: 1), zoom($from: 0.5, $to: 1));
   }
 }
 
@@ -104,11 +104,11 @@
   }
 
   [data-modal] {
-    @include ca-animation(fade($from: 1, $to: 0), zoom($from: 1, $to: 0.5));
-
     animation-duration: $ca-duration-rapid;
     animation-fill-mode: forwards;
     animation-timing-function: $ca-bounce-out;
+
+    @include ca-animation(fade($from: 1, $to: 0), zoom($from: 1, $to: 0.5));
   }
 }
 
diff --git a/packages/components/src/Modal/GenericModal/subcomponents/ModalHeader/ModalHeader.module.scss b/packages/components/src/Modal/GenericModal/subcomponents/ModalHeader/ModalHeader.module.scss
index 907dc297841..7eb76f8b7d3 100644
--- a/packages/components/src/Modal/GenericModal/subcomponents/ModalHeader/ModalHeader.module.scss
+++ b/packages/components/src/Modal/GenericModal/subcomponents/ModalHeader/ModalHeader.module.scss
@@ -3,10 +3,10 @@
 @import "../../../../../styles/utils/layers";
 
 .dismissButton {
-  @include ca-position($end: 0, $top: 0);
-
   position: absolute;
   z-index: $ca-z-index-popover;
+
+  @include ca-position($end: 0, $top: 0);
 }
 
 .layout {
diff --git a/packages/components/src/Modal/InputEditModal/InputEditModal.module.scss b/packages/components/src/Modal/InputEditModal/InputEditModal.module.scss
index c2a2fe1e7f9..67e72abaa70 100644
--- a/packages/components/src/Modal/InputEditModal/InputEditModal.module.scss
+++ b/packages/components/src/Modal/InputEditModal/InputEditModal.module.scss
@@ -10,19 +10,19 @@
   max-width: 600px;
 
   .animatingEnter & {
-    @include ca-animation(fade($from: 0, $to: 1), zoom($from: 0.5, $to: 1));
-
     animation-duration: $ca-duration-fast;
     animation-fill-mode: forwards;
     animation-timing-function: $ca-bounce-in;
+
+    @include ca-animation(fade($from: 0, $to: 1), zoom($from: 0.5, $to: 1));
   }
 
   .animatingLeave & {
-    @include ca-animation(fade($from: 1, $to: 0), zoom($from: 1, $to: 0.5));
-
     animation-duration: $ca-duration-rapid;
     animation-fill-mode: forwards;
     animation-timing-function: $ca-bounce-out;
+
+    @include ca-animation(fade($from: 1, $to: 0), zoom($from: 1, $to: 0.5));
   }
 }
 
diff --git a/packages/components/src/Notification/subcomponents/GenericNotification/_mixins.scss b/packages/components/src/Notification/subcomponents/GenericNotification/_mixins.scss
index 49aa134d901..8ac0fc817ec 100644
--- a/packages/components/src/Notification/subcomponents/GenericNotification/_mixins.scss
+++ b/packages/components/src/Notification/subcomponents/GenericNotification/_mixins.scss
@@ -282,13 +282,16 @@ $notification-slide-right: transform 300ms ease-out;
 }
 
 %ca-notification__cancel {
+  cursor: pointer;
   appearance: none;
-  background: transparent;
-  border: none;
-  font: inherit;
+  transition: none;
+  transform: none;
   margin: 0;
   padding: 0;
-  transition: none;
+  border: none;
+  background: transparent;
+  font: inherit;
+  color: $color-purple-800;
 
   .icon {
     opacity: 70%;
@@ -319,10 +322,6 @@ $notification-slide-right: transform 300ms ease-out;
     }
   }
 
-  cursor: pointer;
-  color: $color-purple-800;
-  transform: none;
-
   &:active {
     transform: translateY(1px);
   }
diff --git a/packages/components/src/RichTextEditor/RichTextEditor/RichTextEditor.module.scss b/packages/components/src/RichTextEditor/RichTextEditor/RichTextEditor.module.scss
index 31aa7b4d58b..22de32f5527 100644
--- a/packages/components/src/RichTextEditor/RichTextEditor/RichTextEditor.module.scss
+++ b/packages/components/src/RichTextEditor/RichTextEditor/RichTextEditor.module.scss
@@ -6,8 +6,6 @@
 @import "../mixins";
 
 .editor > :global(.ProseMirror) {
-  @include content-styles;
-
   border-radius: $border-solid-border-radius;
   padding: $spacing-sm calc(#{$spacing-xs} * 3);
   position: relative;
@@ -15,6 +13,8 @@
     background-color $animation-duration-immediate,
     border-color $animation-duration-immediate;
 
+  @include content-styles;
+
   &:hover,
   &:focus-visible {
     border-color: $color-gray-600;
diff --git a/packages/components/src/Select/Select.module.scss b/packages/components/src/Select/Select.module.scss
index 7d3760cbad3..db9180b2a3d 100644
--- a/packages/components/src/Select/Select.module.scss
+++ b/packages/components/src/Select/Select.module.scss
@@ -47,15 +47,15 @@ $focus-border-color: $color-blue-500;
   }
 
   .control {
-    &.disabled {
-      opacity: 30%;
-    }
-
     min-height: $input-height;
     border: $border-solid-border-width $border-solid-border-style
       $color-gray-500;
     border-radius: $border-solid-border-radius;
 
+    &.disabled {
+      opacity: 30%;
+    }
+
     &:hover {
       border-color: $color-gray-600;
       background-color: $color-gray-100;
@@ -148,12 +148,12 @@ $focus-border-color: $color-blue-500;
   }
 
   .selectedOption {
+    font-weight: $typography-paragraph-bold-font-weight;
+    color: $color-blue-500;
+
     &:not(.focusedOption) {
       background-color: transparent;
     }
-
-    font-weight: $typography-paragraph-bold-font-weight;
-    color: $color-blue-500;
   }
 
   .disabledOption {
diff --git a/packages/components/src/Table/Table.module.scss b/packages/components/src/Table/Table.module.scss
index 3c5f729961e..6293ab04f5b 100644
--- a/packages/components/src/Table/Table.module.scss
+++ b/packages/components/src/Table/Table.module.scss
@@ -14,7 +14,9 @@ $row-height-data-variant: 48px;
   text-decoration: none;
   color: $color-purple-800;
   display: block;
+}
 
+@mixin anchor-reset-pseudo-states {
   &:hover,
   &:active,
   &:focus {
@@ -94,6 +96,8 @@ $row-height-data-variant: 48px;
   // Ensures that the 100% doesn't go outside of the `headerRowCell` width
   box-sizing: border-box;
 
+  @include anchor-reset-pseudo-states;
+
   &:focus-visible {
     outline: none;
     position: relative;
@@ -161,8 +165,12 @@ $row-height-data-variant: 48px;
 
 .card {
   @include button-reset;
+  // These css properties are required for when the rows are anchor elements
+  @include anchor-reset;
 
-  background: $color-white;
+  // This is an optical hack to stop the card shadow from overlapping over
+  // the proceeding cards
+  box-shadow: 0 4px 6px rgba(53, 55, 74, 0.04);
   border: solid 1px rgba($color-purple-700-rgb, 0.1);
   transition:
     box-shadow $animation-duration-rapid,
@@ -170,13 +178,9 @@ $row-height-data-variant: 48px;
     margin $animation-duration-rapid,
     padding $animation-duration-rapid,
     width $animation-duration-rapid;
+  background: $color-white;
 
-  // This is an optical hack to stop the card shadow from overlapping over
-  // the proceeding cards
-  box-shadow: 0 4px 6px rgba(53, 55, 74, 0.04);
-
-  // These css properties are required for when the rows are anchor elements
-  @include anchor-reset;
+  @include anchor-reset-pseudo-states;
 
   &:not(:first-child) {
     margin-top: -1px;
diff --git a/packages/components/src/TextArea/TextArea.module.scss b/packages/components/src/TextArea/TextArea.module.scss
index cb8251e3d9e..a56fb7adb5f 100644
--- a/packages/components/src/TextArea/TextArea.module.scss
+++ b/packages/components/src/TextArea/TextArea.module.scss
@@ -91,15 +91,15 @@ $input-disabled-border-alpha: 50%;
 
 // Reversed (Dark Backgrounds)
 .textarea.reversed {
+  border-color: rgba($color-white-rgb, 0.65);
+  background: transparent;
+  color: $color-white;
+
   @include form-input-focus-state {
     background: rgba($color-white-rgb, 0.1);
     border-color: $color-white;
   }
 
-  border-color: rgba($color-white-rgb, 0.65);
-  background: transparent;
-  color: $color-white;
-
   @include form-input-placeholder {
     line-height: 1.5;
     color: $color-white;
diff --git a/packages/components/src/TextField/TextField.module.scss b/packages/components/src/TextField/TextField.module.scss
index 2880899eeca..5ee3846d30c 100644
--- a/packages/components/src/TextField/TextField.module.scss
+++ b/packages/components/src/TextField/TextField.module.scss
@@ -1,49 +1,23 @@
-@import "~@kaizen/design-tokens/sass/color";
 @import "../../styles/utils/animation";
-@import "../../styles/utils/legacy/layout";
-@import "../../styles/utils/legacy/type";
-
-@mixin input-icon($color, $reversed) {
-  color: $color;
-
-  .withReversed & {
-    color: $reversed;
-  }
-}
 
 .input {
-  margin-top: $spacing-6;
+  margin-top: var(--spacing-6);
 }
 
-$input-disabled-opacity: 0.3;
+.icon {
+  color: var(--textfield-icon-color);
 
-///////////////////////////////////////////////////
-// VALIDATION STYLES
-///////////////////////////////////////////////////
-.success {
-  @include input-icon($color-green-500, $color-green-400);
   @include ca-animation-fade(in);
-
-  &.disabled {
-    @include input-icon(
-      rgba($color-green-500-rgb, $input-disabled-opacity),
-      rgba($color-green-400-rgb, $input-disabled-opacity)
-    );
-  }
 }
 
-.error {
-  @include input-icon($color-red-100, $color-purple-700);
-  @include ca-animation-fade(in);
-}
+.success {
+  --textfield-icon-color: var(--color-green-500);
 
-.caution {
-  @include input-icon($color-yellow-200, $color-purple-700);
-  @include ca-animation-fade(in);
+  .reversed & {
+    --textfield-icon-color: var(--color-green-400);
+  }
 }
 
-.message {
-  &.disabled {
-    opacity: $input-disabled-opacity;
-  }
+.disabled {
+  opacity: 0.3;
 }
diff --git a/packages/components/src/TextField/TextField.tsx b/packages/components/src/TextField/TextField.tsx
index a4c6c06c458..d5d63d26307 100644
--- a/packages/components/src/TextField/TextField.tsx
+++ b/packages/components/src/TextField/TextField.tsx
@@ -62,10 +62,7 @@ export const TextField = ({
       id={`${id}-field-group`}
       data-testid={`${id}-field-group`}
       inline={inline}
-      classNameOverride={classnames(
-        styles.withLabel,
-        disabled && styles.withDisabled
-      )}
+      classNameOverride={classnames(reversed && styles.reversed)}
     >
       <Label
         id={`${id}-field-label`}
@@ -88,6 +85,7 @@ export const TextField = ({
           status === "success" && (
             <div
               className={classnames(
+                styles.icon,
                 styles.success,
                 disabled && styles.disabled
               )}
diff --git a/packages/components/src/TextField/_docs/TextField.stickersheet.stories.tsx b/packages/components/src/TextField/_docs/TextField.stickersheet.stories.tsx
index ea3b2482093..c8798239121 100644
--- a/packages/components/src/TextField/_docs/TextField.stickersheet.stories.tsx
+++ b/packages/components/src/TextField/_docs/TextField.stickersheet.stories.tsx
@@ -34,7 +34,7 @@ const StickerSheetTemplate: StickerSheetStory = {
   render: ({ isReversed }) => (
     <StickerSheet isReversed={isReversed}>
       <StickerSheet.Header
-        headings={["Default", "Hover", "Active", "Focus"]}
+        headings={["Default", "Hover", "Active", "Focus", "Disabled"]}
         hasVerticalHeadings
       />
       <StickerSheet.Body>
@@ -71,6 +71,14 @@ const StickerSheetTemplate: StickerSheetStory = {
               validationMessage="A valid question"
               data-sb-pseudo-styles="focus"
             />
+            <TextFieldExampleGroup
+              reversed={isReversed}
+              labelText="TextField"
+              description="A short description"
+              status={status}
+              validationMessage="A valid question"
+              disabled
+            />
           </StickerSheet.Row>
         ))}
       </StickerSheet.Body>
diff --git a/packages/components/src/Tile/subcomponents/GenericTile/GenericTile.module.scss b/packages/components/src/Tile/subcomponents/GenericTile/GenericTile.module.scss
index 8b90a89891c..3ce54e51fed 100644
--- a/packages/components/src/Tile/subcomponents/GenericTile/GenericTile.module.scss
+++ b/packages/components/src/Tile/subcomponents/GenericTile/GenericTile.module.scss
@@ -13,19 +13,18 @@ $tilePaddingTop: $spacing-xl;
 }
 
 .tile {
+  position: relative;
   width: $tileWidth;
-
-  [data-tile-grid] & {
-    width: auto;
-  }
-
   height: $tileHeight;
-  position: relative;
-  box-shadow: $shadow-small-box-shadow;
-  background-color: $color-white;
   transition: transform $ca-duration-slow $ca-default;
   transform-style: preserve-3d;
+  box-shadow: $shadow-small-box-shadow;
   border-radius: 7px;
+  background-color: $color-white;
+
+  [data-tile-grid] & {
+    width: auto;
+  }
 
   @include ca-media-mobile {
     width: 100%;
diff --git a/packages/components/src/TitleBlockZen/TitleBlockZen.module.scss b/packages/components/src/TitleBlockZen/TitleBlockZen.module.scss
index 6ee198fd601..0e52c98113e 100644
--- a/packages/components/src/TitleBlockZen/TitleBlockZen.module.scss
+++ b/packages/components/src/TitleBlockZen/TitleBlockZen.module.scss
@@ -115,14 +115,13 @@ $tab-container-height-medium-and-small-collapsed: 0;
   align-items: center;
   min-width: 0; // this is an important trick to prevent flexbox items from overflowing
   z-index: $ca-z-index-dropdown; // this ensures the page switcher dropdown sits over nav tabs
+  transform: translateY(-0.0833em);
 
   .hasSubtitle & {
     @include title-block-under-1366 {
       transform: translateY(-0.3833em);
     }
   }
-
-  transform: translateY(-0.0833em);
 }
 
 .titleAndSubtitleInner {
@@ -243,13 +242,12 @@ $tab-container-height-medium-and-small-collapsed: 0;
   line-height: $typography-paragraph-small-line-height;
   letter-spacing: $typography-paragraph-small-letter-spacing;
   max-width: 230px;
+  margin-inline: var(--spacing-12) 0;
 
   .adminVariant & {
     color: $color-purple-800;
   }
 
-  @include ca-margin($start: calc(#{$ca-grid} / 2));
-
   @include title-block-under-1366 {
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -285,9 +283,7 @@ $tab-container-height-medium-and-small-collapsed: 0;
 
 .sectionTitleOverride.sectionTitleOverride {
   white-space: nowrap;
-
-  @include ca-margin($end: $ca-grid);
-
+  margin-inline: 0 var(--spacing-24);
   font-family: $typography-heading-2-font-family;
   font-weight: $typography-heading-2-font-weight;
   font-size: $typography-heading-2-font-size;
@@ -316,10 +312,6 @@ $tab-container-height-medium-and-small-collapsed: 0;
 }
 
 .sectionTitleDescription {
-  .sectionTitle + & {
-    margin-top: calc(#{$ca-grid} / 4);
-  }
-
   color: $color-white;
   max-width: 780px;
   font-family: $typography-paragraph-small-font-family;
@@ -328,6 +320,10 @@ $tab-container-height-medium-and-small-collapsed: 0;
   line-height: $typography-paragraph-small-line-height;
   letter-spacing: $typography-paragraph-small-letter-spacing;
 
+  .sectionTitle + & {
+    margin-top: var(--spacing-6);
+  }
+
   &.dark {
     color: rgba($color-purple-800-rgb, 0.7);
   }
@@ -360,30 +356,28 @@ $tab-container-height-medium-and-small-collapsed: 0;
 }
 
 .tag {
-  @include ca-margin($start: calc(#{$ca-grid} / 2));
-
   display: flex;
   align-items: center;
+  margin-inline: var(--spacing-12) 0;
 
   @include title-block-medium-and-small {
     display: none;
   }
 
   + .pageSwitcherSelectNextToTitle {
-    @include ca-margin($start: 0);
+    margin-inline-start: 0;
   }
 }
 
 .pageSwitcherSelectNextToTitle {
-  @include ca-margin($start: calc(#{$ca-grid} / 2));
-
   flex-shrink: 0;
-  width: 10 * $ca-grid;
+  width: var(--spacing-240);
+  margin-inline: var(--spacing-12) 0;
 }
 
 .pageSwitcherSelectUnderneathTitle {
   flex-shrink: 0;
-  max-width: 10 * $ca-grid;
+  max-width: var(--spacing-240);
 }
 
 .navigationTabsContainer {
@@ -558,11 +552,10 @@ $tab-container-height-medium-and-small-collapsed: 0;
 
   @media only screen and (max-width: $breadcrumb-breakpoint-width) {
     position: relative;
+    transform: translateY(0);
+    margin-inline: 0 var(--spacing-12);
 
-    @include ca-margin($end: calc(#{$ca-grid} / 2));
     @include ca-position($start: 0);
-
-    transform: translateY(0);
   }
 
   @include title-block-medium-and-small {
diff --git a/packages/components/src/TitleBlockZen/subcomponents/MobileActions.module.scss b/packages/components/src/TitleBlockZen/subcomponents/MobileActions.module.scss
index 911ec9415ab..798926a2fd3 100644
--- a/packages/components/src/TitleBlockZen/subcomponents/MobileActions.module.scss
+++ b/packages/components/src/TitleBlockZen/subcomponents/MobileActions.module.scss
@@ -77,8 +77,6 @@ $slide-up-duration: 0.4s;
 }
 
 .mobileActionsPrimaryLabel {
-  @include ca-padding($start: $ca-grid * 0.75);
-
   text-align: left;
   text-decoration: none;
   color: $color-white;
@@ -87,6 +85,8 @@ $slide-up-duration: 0.4s;
   font-size: $typography-button-primary-font-size;
   line-height: $typography-button-primary-line-height;
   letter-spacing: $typography-button-primary-letter-spacing;
+
+  @include ca-padding($start: $ca-grid * 0.75);
 }
 
 .mobileActionsPrimaryButton,
diff --git a/packages/components/src/__future__/Tag/RemovableTag/subcomponents/RemoveButton.module.scss b/packages/components/src/__future__/Tag/RemovableTag/subcomponents/RemoveButton.module.scss
index a64b6d23480..1a7fb15273c 100644
--- a/packages/components/src/__future__/Tag/RemovableTag/subcomponents/RemoveButton.module.scss
+++ b/packages/components/src/__future__/Tag/RemovableTag/subcomponents/RemoveButton.module.scss
@@ -8,6 +8,7 @@
   position: relative;
   display: inline-flex;
   border-radius: 50%;
+  color: rgba($color-purple-800-rgb, 0.7);
 
   &:focus,
   &:focus-visible {
@@ -34,8 +35,6 @@
     border-radius: 50%;
   }
 
-  color: rgba($color-purple-800-rgb, 0.7);
-
   &:hover,
   &:focus,
   &:focus-visible {
diff --git a/packages/components/styles/utils/animations/_animations.scss b/packages/components/styles/utils/animations/_animations.scss
index eb24cda2c5e..1df5fffe319 100644
--- a/packages/components/styles/utils/animations/_animations.scss
+++ b/packages/components/styles/utils/animations/_animations.scss
@@ -3,17 +3,17 @@
 @import "./vendor/effects/zoom";
 
 @mixin ca-animation-pop($duration: $ca-duration-slow, $delay: null) {
-  @include ca-animation(pop());
-
   animation-duration: $duration;
   animation-delay: $delay;
+
+  @include ca-animation(pop());
 }
 
 @mixin ca-animation-pulsate($duration: $ca-duration-slow, $delay: null) {
-  @include ca-animation(pulsate());
-
   animation-duration: $duration;
   animation-delay: $delay;
+
+  @include ca-animation(pulsate());
 }
 
 @mixin ca-animation-fade(
@@ -23,16 +23,16 @@
   $from: 0,
   $to: 1
 ) {
+  animation-duration: $duration;
+  animation-delay: $delay;
+  animation-fill-mode: forwards;
+
   @if ($state == out) {
     $from: 1;
     $to: 0;
   }
 
   @include ca-animation(fade($from: $from, $to: $to));
-
-  animation-duration: $duration;
-  animation-delay: $delay;
-  animation-fill-mode: forwards;
 }
 
 @mixin ca-animation-slide-fade(
@@ -52,16 +52,16 @@
     $timing: $ca-bounce-out;
   }
 
+  animation-duration: $duration;
+  animation-delay: $delay;
+  animation-fill-mode: forwards;
+  animation-timing-function: $timing;
+
   @include ca-animation(
     fade($from: $from, $to: $to),
     slide($state: out, $direction: $direction)
   );
   @include mui-animation(fade(in));
-
-  animation-duration: $duration;
-  animation-delay: $delay;
-  animation-fill-mode: forwards;
-  animation-timing-function: $timing;
 }
 
 @mixin ca-animation-scale-fade(
@@ -79,13 +79,13 @@
     $timing: $ca-bounce-out;
   }
 
-  @include ca-animation(
-    fade($from: $from, $to: $to),
-    zoom($from: $from, $to: $to)
-  );
-
   animation-duration: $duration;
   animation-delay: $delay;
   animation-fill-mode: forwards;
   animation-timing-function: $timing;
+
+  @include ca-animation(
+    fade($from: $from, $to: $to),
+    zoom($from: $from, $to: $to)
+  );
 }
diff --git a/packages/components/styles/utils/animations/vendor/transitions/_animation.scss b/packages/components/styles/utils/animations/vendor/transitions/_animation.scss
index 387269ed4b6..5d818f39d49 100644
--- a/packages/components/styles/utils/animations/vendor/transitions/_animation.scss
+++ b/packages/components/styles/utils/animations/vendor/transitions/_animation.scss
@@ -6,9 +6,8 @@
 /* prettier-ignore */
 @mixin mui-animation($args...) {
   $name: map-get(-mui-process-args($args...), name);
-
-  @include mui-keyframes($name, $args...);
-
   /* stylelint-disable-next-line scss/function-unquote-no-unquoted-strings-inside */
   animation-name: unquote($name);
+
+  @include mui-keyframes($name, $args...);
 }
diff --git a/packages/components/styles/utils/legacy/_layout.scss b/packages/components/styles/utils/legacy/_layout.scss
index 91f2d539c20..141fcc25b92 100644
--- a/packages/components/styles/utils/legacy/_layout.scss
+++ b/packages/components/styles/utils/legacy/_layout.scss
@@ -13,27 +13,15 @@ $ca-layout-sidebar-width: 10 * $ca-grid;
 @mixin ca-margin($start: 0, $end: 0, $top: null, $bottom: null) {
   margin-top: $top;
   margin-bottom: $bottom;
-  margin-right: $end;
-  margin-left: $start;
-
-  &[dir="rtl"],
-  [dir="rtl"] & {
-    margin-right: $start;
-    margin-left: $end;
-  }
+  margin-inline-end: $end;
+  margin-inline-start: $start;
 }
 
 @mixin ca-padding($start: 0, $end: 0, $top: null, $bottom: null) {
   padding-top: $top;
   padding-bottom: $bottom;
-  padding-right: $end;
-  padding-left: $start;
-
-  &[dir="rtl"],
-  [dir="rtl"] & {
-    padding-right: $start;
-    padding-left: $end;
-  }
+  padding-inline-end: $end;
+  padding-inline-start: $start;
 }
 
 @mixin ca-position($start: null, $end: null, $top: null, $bottom: null) {
@@ -47,14 +35,8 @@ $ca-layout-sidebar-width: 10 * $ca-grid;
 
   top: $top;
   bottom: $bottom;
-  right: $end;
-  left: $start;
-
-  &[dir="rtl"],
-  [dir="rtl"] & {
-    right: $start;
-    left: $end;
-  }
+  inset-inline-end: $end;
+  inset-inline-start: $start;
 }
 
 /* stylelint-enable scss/at-if-no-null, declaration-block-no-redundant-longhand-properties */