chore(deprecations): restructed sass code to fix deprecation messages (#2507)

Author: agliga

src/sass/button/button.scss

@@ -4,8 +4,6 @@
 
 button.btn,
 a.fake-btn {
-    @include btn-base();
-
     background-color: transparent;
     border-radius: var(--btn-border-radius, calc($button-height-regular / 2));
     color: inherit;
@@ -14,6 +12,8 @@ a.fake-btn {
     min-height: $button-height-regular;
     min-width: 88px;
     padding: $button-padding-vertical $button-padding-horizontal;
+
+    @include btn-base();
 }
 
 button.btn[disabled],
@@ -85,11 +85,11 @@ a.fake-btn--fluid {
 
 .btn__cell,
 .fake-btn__cell {
+    justify-content: center;
+
     @include btn-cell-base();
     @include btn-cell-fixed-height();
     @include btn-cell-truncated();
-
-    justify-content: center;
 }
 
 button.btn--form .btn__cell,
@@ -520,12 +520,12 @@ a.fake-btn--truncated {
 
 button.btn--large-truncated,
 a.fake-btn--large-truncated {
-    @include btn-truncate();
-
     font-size: var(--font-size-medium);
     height: $button-height-large;
     min-height: $button-height-large;
     padding: $button-padding-vertical-large $button-padding-horizontal;
+
+    @include btn-truncate();
 }
 
 button.btn--split-start,

src/sass/carousel/carousel.scss

@@ -19,16 +19,6 @@ $ebay-carousel-transition-function: ease-in-out;
         color-background-primary
     );
 
-    &--prev {
-        left: calc(var(--spacing-200) * -1);
-        margin-inline-end: 1px;
-    }
-
-    &--next {
-        margin-inline-start: 1px;
-        right: calc(var(--spacing-200) * -1);
-    }
-
     align-items: center;
     border: 1px solid;
     border-radius: 16px;
@@ -53,6 +43,16 @@ $ebay-carousel-transition-function: ease-in-out;
         color-stroke-subtle
     );
 
+    &--prev {
+        left: calc(var(--spacing-200) * -1);
+        margin-inline-end: 1px;
+    }
+
+    &--next {
+        margin-inline-start: 1px;
+        right: calc(var(--spacing-200) * -1);
+    }
+
     svg {
         @include color-token(
             carousel-paddle-foreground-color,

src/sass/cta-button/cta-button.scss

@@ -3,8 +3,6 @@
 @import "../mixins/private/token-mixins";
 
 a.cta-btn {
-    @include btn-base();
-
     @include background-color-token(
         cta-btn-background-color,
         color-background-primary
@@ -20,6 +18,7 @@ a.cta-btn {
     max-width: 100%;
     padding: $button-padding-vertical 20px;
     @include color-token(cta-btn-foreground-color, color-foreground-primary);
+    @include btn-base();
 }
 
 a.cta-btn:visited {
@@ -67,10 +66,11 @@ a.cta-btn--fluid {
 
 span.cta-btn__cell {
     @include btn-cell-base();
-    @include btn-cell-fixed-height();
-    @include btn-cell-truncated();
 
     justify-content: center;
+
+    @include btn-cell-fixed-height();
+    @include btn-cell-truncated();
 }
 
 a.cta-btn svg.icon {

src/sass/filter-menu/filter-menu.scss

@@ -70,10 +70,9 @@ span.filter-menu-form__item {
 
 .filter-menu__item[role^="menuitem"],
 .filter-menu-form__item {
-    @include filter-menu-item-base();
-
     padding: 8px 16px;
 
+    @include filter-menu-item-base();
     &:last-child {
         margin-bottom: 8px;
     }
@@ -113,14 +112,13 @@ span.filter-menu-form__item {
 
 button.filter-menu__footer,
 button.filter-menu-form__footer[type="submit"] {
-    @include filter-menu-item-base();
-
     border: none;
     border-top-style: solid;
     border-top-width: 1px;
     bottom: 0;
     padding: 16px;
     @include border-color-token(filter-menu-border-color, color-stroke-subtle);
+    @include filter-menu-item-base();
 
     &:hover {
         background-color: var(--color-state-primary-hover);

src/sass/mixins/private/_button-mixins.scss

@@ -23,9 +23,11 @@ $button-border-radius-large: 24px;
     }
 
     &--truncated {
-        @include btn-truncate();
+        & {
+            height: 40px;
+        }
 
-        height: 40px;
+        @include btn-truncate();
     }
 
     &:focus-visible {

src/sass/mixins/private/_menu-mixins.scss

@@ -1,17 +1,18 @@
 @import "./selection-list-mixins";
 
 @mixin menu-menuitem-base($component) {
-    @include selection-list-item-base();
-
     @include border-color-token(
         #{$component}-menuitem-border-color,
         color-background-primary
     );
+
     @include color-token(
         #{$component}-menuitem-foreground-color,
         color-foreground-primary
     );
 
+    @include selection-list-item-base();
+
     &:hover {
         background-color: var(--color-state-primary-hover);
         @include color-token(