From a859c31b16ca58228f87d9c09863e5db86353d98 Mon Sep 17 00:00:00 2001
From: Andrew Gliga <agliga@ebay.com>
Date: Mon, 16 Dec 2024 10:40:02 -0800
Subject: [PATCH] chore(deprecations): restructed sass code to fix deprecation
 messages (#2507)

---
 src/sass/button/button.scss                 | 12 ++++++------
 src/sass/carousel/carousel.scss             | 20 ++++++++++----------
 src/sass/cta-button/cta-button.scss         |  8 ++++----
 src/sass/filter-menu/filter-menu.scss       |  6 ++----
 src/sass/mixins/private/_button-mixins.scss |  6 ++++--
 src/sass/mixins/private/_menu-mixins.scss   |  5 +++--
 6 files changed, 29 insertions(+), 28 deletions(-)

diff --git a/src/sass/button/button.scss b/src/sass/button/button.scss
index 8105624c2..b926d1558 100644
--- a/src/sass/button/button.scss
+++ b/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,
diff --git a/src/sass/carousel/carousel.scss b/src/sass/carousel/carousel.scss
index d410ecf46..451999ded 100644
--- a/src/sass/carousel/carousel.scss
+++ b/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,
diff --git a/src/sass/cta-button/cta-button.scss b/src/sass/cta-button/cta-button.scss
index 7515e826f..982b9c64a 100644
--- a/src/sass/cta-button/cta-button.scss
+++ b/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 {
diff --git a/src/sass/filter-menu/filter-menu.scss b/src/sass/filter-menu/filter-menu.scss
index 555766743..c4587de71 100644
--- a/src/sass/filter-menu/filter-menu.scss
+++ b/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);
diff --git a/src/sass/mixins/private/_button-mixins.scss b/src/sass/mixins/private/_button-mixins.scss
index dc3235441..67a51082f 100644
--- a/src/sass/mixins/private/_button-mixins.scss
+++ b/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 {
diff --git a/src/sass/mixins/private/_menu-mixins.scss b/src/sass/mixins/private/_menu-mixins.scss
index 35880dbd6..4f1a106a2 100644
--- a/src/sass/mixins/private/_menu-mixins.scss
+++ b/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(