@ebay/skin 17.5.0-next.0 → 18.0.0-next.0

package/src/{less → sass}/listbox-button/stories/error/error.form.stories.js

@@ -6,7 +6,7 @@ export const enabled = () => `
         <span class="btn__cell">
             <span class="btn__label">Color: </span>
             <span class="btn__text">-</span>
-            <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-down-12"></use>
             </svg>
         </span>
@@ -15,25 +15,25 @@ export const enabled = () => `
         <div class="listbox-button__options" role="listbox">
             <div class="listbox-button__option" role="option">
                 <span class="listbox-button__value">Red</span>
-                <svg class="icon icon--tick-16" height="8" width="8">
+                <svg class="icon icon--16" height="8" width="8">
                     <use href="#icon-tick-16"></use>
                 </svg>
             </div>
             <div class="listbox-button__option" role="option">
                 <span class="listbox-button__value">Blue</span>
-                <svg class="icon icon--tick-16" height="8" width="8">
+                <svg class="icon icon--16" height="8" width="8">
                     <use href="#icon-tick-16"></use>
                 </svg>
             </div>
             <div class="listbox-button__option" role="option">
                 <span class="listbox-button__value">Yellow</span>
-                <svg class="icon icon--tick-16" height="8" width="8">
+                <svg class="icon icon--16" height="8" width="8">
                     <use href="#icon-tick-16"></use>
                 </svg>
             </div>
             <div class="listbox-button__option" role="option">
                 <span class="listbox-button__value">Green</span>
-                <svg class="icon icon--tick-16" height="8" width="8">
+                <svg class="icon icon--16" height="8" width="8">
                     <use href="#icon-tick-16"></use>
                 </svg>
             </div>
@@ -54,7 +54,7 @@ export const invalid = () => `
         <span class="btn__cell">
             <span class="btn__label">Color: </span>
             <span class="btn__text">-</span>
-            <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-down-12"></use>
             </svg>
         </span>
@@ -63,25 +63,25 @@ export const invalid = () => `
         <div class="listbox-button__options" role="listbox">
             <div class="listbox-button__option" role="option">
                 <span class="listbox-button__value">Red</span>
-                <svg class="icon icon--tick-16" height="8" width="8">
+                <svg class="icon icon--16" height="8" width="8">
                     <use href="#icon-tick-16"></use>
                 </svg>
             </div>
             <div class="listbox-button__option" role="option">
                 <span class="listbox-button__value">Blue</span>
-                <svg class="icon icon--tick-16" height="8" width="8">
+                <svg class="icon icon--16" height="8" width="8">
                     <use href="#icon-tick-16"></use>
                 </svg>
             </div>
             <div class="listbox-button__option" role="option">
                 <span class="listbox-button__value">Yellow</span>
-                <svg class="icon icon--tick-16" height="8" width="8">
+                <svg class="icon icon--16" height="8" width="8">
                     <use href="#icon-tick-16"></use>
                 </svg>
             </div>
             <div class="listbox-button__option" role="option">
                 <span class="listbox-button__value">Green</span>
-                <svg class="icon icon--tick-16" height="8" width="8">
+                <svg class="icon icon--16" height="8" width="8">
                     <use href="#icon-tick-16"></use>
                 </svg>
             </div>

package/src/{less → sass}/listbox-button/stories/form.stories.js

@@ -6,7 +6,7 @@ export const enabled = () => `
         <span class="btn__cell">
             <span class="btn__label">Color: </span>
             <span class="btn__text">-</span>
-            <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-down-12"></use>
             </svg>
         </span>
@@ -15,25 +15,25 @@ export const enabled = () => `
         <div class="listbox-button__options" role="listbox">
             <div class="listbox-button__option" role="option">
                 <span class="listbox-button__value">Red</span>
-                <svg class="icon icon--tick-16" height="8" width="8">
+                <svg class="icon icon--16" height="8" width="8">
                     <use href="#icon-tick-16"></use>
                 </svg>
             </div>
             <div class="listbox-button__option" role="option">
                 <span class="listbox-button__value">Blue</span>
-                <svg class="icon icon--tick-16" height="8" width="8">
+                <svg class="icon icon--16" height="8" width="8">
                     <use href="#icon-tick-16"></use>
                 </svg>
             </div>
             <div class="listbox-button__option" role="option">
                 <span class="listbox-button__value">Yellow</span>
-                <svg class="icon icon--tick-16" height="8" width="8">
+                <svg class="icon icon--16" height="8" width="8">
                     <use href="#icon-tick-16"></use>
                 </svg>
             </div>
             <div class="listbox-button__option" role="option">
                 <span class="listbox-button__value">Green</span>
-                <svg class="icon icon--tick-16" height="8" width="8">
+                <svg class="icon icon--16" height="8" width="8">
                     <use href="#icon-tick-16"></use>
                 </svg>
             </div>
@@ -54,7 +54,7 @@ export const disabled = () => `
         <span class="btn__cell">
             <span class="btn__label">Color: </span>
             <span class="btn__text">-</span>
-            <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-down-12"></use>
             </svg>
         </span>
@@ -63,25 +63,25 @@ export const disabled = () => `
         <div class="listbox-button__options" role="listbox">
             <div class="listbox-button__option" role="option">
                 <span class="listbox-button__value">Red</span>
-                <svg class="icon icon--tick-16" height="8" width="8">
+                <svg class="icon icon--16" height="8" width="8">
                     <use href="#icon-tick-16"></use>
                 </svg>
             </div>
             <div class="listbox-button__option" role="option">
                 <span class="listbox-button__value">Blue</span>
-                <svg class="icon icon--tick-16" height="8" width="8">
+                <svg class="icon icon--16" height="8" width="8">
                     <use href="#icon-tick-16"></use>
                 </svg>
             </div>
             <div class="listbox-button__option" role="option">
                 <span class="listbox-button__value">Yellow</span>
-                <svg class="icon icon--tick-16" height="8" width="8">
+                <svg class="icon icon--16" height="8" width="8">
                     <use href="#icon-tick-16"></use>
                 </svg>
             </div>
             <div class="listbox-button__option" role="option">
                 <span class="listbox-button__value">Green</span>
-                <svg class="icon icon--tick-16" height="8" width="8">
+                <svg class="icon icon--16" height="8" width="8">
                     <use href="#icon-tick-16"></use>
                 </svg>
             </div>
@@ -102,7 +102,7 @@ export const invalid = () => `
         <span class="btn__cell">
             <span class="btn__label">Color: </span>
             <span class="btn__text">-</span>
-            <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-down-12"></use>
             </svg>
         </span>
@@ -111,25 +111,25 @@ export const invalid = () => `
         <div class="listbox-button__options" role="listbox">
             <div class="listbox-button__option" role="option">
                 <span class="listbox-button__value">Red</span>
-                <svg class="icon icon--tick-16" height="8" width="8">
+                <svg class="icon icon--16" height="8" width="8">
                     <use href="#icon-tick-16"></use>
                 </svg>
             </div>
             <div class="listbox-button__option" role="option">
                 <span class="listbox-button__value">Blue</span>
-                <svg class="icon icon--tick-16" height="8" width="8">
+                <svg class="icon icon--16" height="8" width="8">
                     <use href="#icon-tick-16"></use>
                 </svg>
             </div>
             <div class="listbox-button__option" role="option">
                 <span class="listbox-button__value">Yellow</span>
-                <svg class="icon icon--tick-16" height="8" width="8">
+                <svg class="icon icon--16" height="8" width="8">
                     <use href="#icon-tick-16"></use>
                 </svg>
             </div>
             <div class="listbox-button__option" role="option">
                 <span class="listbox-button__value">Green</span>
-                <svg class="icon icon--tick-16" height="8" width="8">
+                <svg class="icon icon--16" height="8" width="8">
                     <use href="#icon-tick-16"></use>
                 </svg>
             </div>

package/src/{less → sass}/listbox-button/stories/subtitle.stories.js

@@ -6,7 +6,7 @@ export const collapsedUnselected = () => `
         <span class="btn__cell">
             <span class="btn__label">Color: </span>
             <span class="btn__text">-</span>
-            <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-down-12"></use>
             </svg>
         </span>
@@ -19,7 +19,7 @@ export const collapsedUnselected = () => `
                     <span class="clipped">.</span>
                     More info about option 1
                 </span>
-                <svg class="icon icon--tick-16" height="8" width="8">
+                <svg class="icon icon--16" height="8" width="8">
                     <use href="#icon-tick-16"></use>
                 </svg>
             </div>
@@ -29,7 +29,7 @@ export const collapsedUnselected = () => `
                     <span class="clipped">.</span>
                     More info about option 2
                 </span>
-                <svg class="icon icon--tick-16" height="8" width="8">
+                <svg class="icon icon--16" height="8" width="8">
                     <use href="#icon-tick-16"></use>
                 </svg>
             </div>
@@ -39,13 +39,13 @@ export const collapsedUnselected = () => `
                     <span class="clipped">.</span>
                     More info about option 3
                 </span>
-                <svg class="icon icon--tick-16" height="8" width="8">
+                <svg class="icon icon--16" height="8" width="8">
                     <use href="#icon-tick-16"></use>
                 </svg>
             </div>
             <div class="listbox-button__option" role="option">
                 <span class="listbox-button__value">Green</span>
-                <svg class="icon icon--tick-16" height="8" width="8">
+                <svg class="icon icon--16" height="8" width="8">
                     <use href="#icon-tick-16"></use>
                 </svg>
             </div>
@@ -60,7 +60,7 @@ export const expandedUnselected = () => `
         <span class="btn__cell">
             <span class="btn__label">Color: </span>
             <span class="btn__text">-</span>
-            <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-down-12"></use>
             </svg>
         </span>
@@ -73,7 +73,7 @@ export const expandedUnselected = () => `
                     <span class="clipped">.</span>
                     More info about red
                 </span>
-                <svg class="icon icon--tick-16" height="8" width="8">
+                <svg class="icon icon--16" height="8" width="8">
                     <use href="#icon-tick-16"></use>
                 </svg>
             </div>
@@ -83,7 +83,7 @@ export const expandedUnselected = () => `
                     <span class="clipped">.</span>
                     More info about blue
                 </span>
-                <svg class="icon icon--tick-16" height="8" width="8">
+                <svg class="icon icon--16" height="8" width="8">
                     <use href="#icon-tick-16"></use>
                 </svg>
             </div>
@@ -93,7 +93,7 @@ export const expandedUnselected = () => `
                     <span class="clipped">.</span>
                     More info about yellow
                 </span>
-                <svg class="icon icon--tick-16" height="8" width="8">
+                <svg class="icon icon--16" height="8" width="8">
                     <use href="#icon-tick-16"></use>
                 </svg>
             </div>
@@ -103,7 +103,7 @@ export const expandedUnselected = () => `
                     <span class="clipped">.</span>
                     More info about green
                 </span>
-                <svg class="icon icon--tick-16" height="8" width="8">
+                <svg class="icon icon--16" height="8" width="8">
                     <use href="#icon-tick-16"></use>
                 </svg>
             </div>
@@ -118,7 +118,7 @@ export const collapsedSelected = () => `
         <span class="btn__cell">
             <span class="btn__label">Color: </span>
             <span class="btn__text">Blue</span>
-            <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-down-12"></use>
             </svg>
         </span>
@@ -131,7 +131,7 @@ export const collapsedSelected = () => `
                     <span class="clipped">.</span>
                     More info about red
                 </span>
-                <svg class="icon icon--tick-16" height="8" width="8">
+                <svg class="icon icon--16" height="8" width="8">
                     <use href="#icon-tick-16"></use>
                 </svg>
             </div>
@@ -141,7 +141,7 @@ export const collapsedSelected = () => `
                     <span class="clipped">.</span>
                     More info about blue
                 </span>
-                <svg class="icon icon--tick-16" height="8" width="8">
+                <svg class="icon icon--16" height="8" width="8">
                     <use href="#icon-tick-16"></use>
                 </svg>
             </div>
@@ -151,7 +151,7 @@ export const collapsedSelected = () => `
                     <span class="clipped">.</span>
                     More info about yellow
                 </span>
-                <svg class="icon icon--tick-16" height="8" width="8">
+                <svg class="icon icon--16" height="8" width="8">
                     <use href="#icon-tick-16"></use>
                 </svg>
             </div>
@@ -161,7 +161,7 @@ export const collapsedSelected = () => `
                     <span class="clipped">.</span>
                     More info about green
                 </span>
-                <svg class="icon icon--tick-16" height="8" width="8">
+                <svg class="icon icon--16" height="8" width="8">
                     <use href="#icon-tick-16"></use>
                 </svg>
             </div>
@@ -176,7 +176,7 @@ export const expandedSelected = () => `
         <span class="btn__cell">
             <span class="btn__label">Color: </span>
             <span class="btn__text">Blue</span>
-            <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-down-12"></use>
             </svg>
         </span>
@@ -189,7 +189,7 @@ export const expandedSelected = () => `
                     <span class="clipped">.</span>
                     More info about red
                 </span>
-                <svg class="icon icon--tick-16" height="8" width="8">
+                <svg class="icon icon--16" height="8" width="8">
                     <use href="#icon-tick-16"></use>
                 </svg>
             </div>
@@ -199,7 +199,7 @@ export const expandedSelected = () => `
                     <span class="clipped">.</span>
                     More info about blue
                 </span>
-                <svg class="icon icon--tick-16" height="8" width="8">
+                <svg class="icon icon--16" height="8" width="8">
                     <use href="#icon-tick-16"></use>
                 </svg>
             </div>
@@ -209,7 +209,7 @@ export const expandedSelected = () => `
                     <span class="clipped">.</span>
                     More info about yellow
                 </span>
-                <svg class="icon icon--tick-16" height="8" width="8">
+                <svg class="icon icon--16" height="8" width="8">
                     <use href="#icon-tick-16"></use>
                 </svg>
             </div>
@@ -219,7 +219,7 @@ export const expandedSelected = () => `
                     <span class="clipped">.</span>
                     More info about green
                 </span>
-                <svg class="icon icon--tick-16" height="8" width="8">
+                <svg class="icon icon--16" height="8" width="8">
                     <use href="#icon-tick-16"></use>
                 </svg>
             </div>
@@ -234,7 +234,7 @@ export const disabled = () => `
         <span class="btn__cell">
             <span class="btn__label">Color: </span>
             <span class="btn__text">Blue</span>
-            <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-down-12"></use>
             </svg>
         </span>
@@ -247,7 +247,7 @@ export const disabled = () => `
                     <span class="clipped">.</span>
                     More info about red
                 </span>
-                <svg class="icon icon--tick-16" height="8" width="8">
+                <svg class="icon icon--16" height="8" width="8">
                     <use href="#icon-tick-16"></use>
                 </svg>
             </div>
@@ -257,7 +257,7 @@ export const disabled = () => `
                     <span class="clipped">.</span>
                     More info about blue
                 </span>
-                <svg class="icon icon--tick-16" height="8" width="8">
+                <svg class="icon icon--16" height="8" width="8">
                     <use href="#icon-tick-16"></use>
                 </svg>
             </div>
@@ -267,7 +267,7 @@ export const disabled = () => `
                     <span class="clipped">.</span>
                     More info about yellow
                 </span>
-                <svg class="icon icon--tick-16" height="8" width="8">
+                <svg class="icon icon--16" height="8" width="8">
                     <use href="#icon-tick-16"></use>
                 </svg>
             </div>
@@ -277,7 +277,7 @@ export const disabled = () => `
                     <span class="clipped">.</span>
                     More info about green
                 </span>
-                <svg class="icon icon--tick-16" height="8" width="8">
+                <svg class="icon icon--16" height="8" width="8">
                     <use href="#icon-tick-16"></use>
                 </svg>
             </div>
@@ -292,7 +292,7 @@ export const invalid = () => `
         <span class="btn__cell">
             <span class="btn__label">Color: </span>
             <span class="btn__text">Blue</span>
-            <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-down-12"></use>
             </svg>
         </span>
@@ -305,7 +305,7 @@ export const invalid = () => `
                     <span class="clipped">.</span>
                     More info about red
                 </span>
-                <svg class="icon icon--tick-16" height="8" width="8">
+                <svg class="icon icon--16" height="8" width="8">
                     <use href="#icon-tick-16"></use>
                 </svg>
             </div>
@@ -315,7 +315,7 @@ export const invalid = () => `
                     <span class="clipped">.</span>
                     More info about blue
                 </span>
-                <svg class="icon icon--tick-16" height="8" width="8">
+                <svg class="icon icon--16" height="8" width="8">
                     <use href="#icon-tick-16"></use>
                 </svg>
             </div>
@@ -325,7 +325,7 @@ export const invalid = () => `
                     <span class="clipped">.</span>
                     More info about yellow
                 </span>
-                <svg class="icon icon--tick-16" height="8" width="8">
+                <svg class="icon icon--16" height="8" width="8">
                     <use href="#icon-tick-16"></use>
                 </svg>
             </div>
@@ -335,7 +335,7 @@ export const invalid = () => `
                     <span class="clipped">.</span>
                     More info about green
                 </span>
-                <svg class="icon icon--tick-16" height="8" width="8">
+                <svg class="icon icon--16" height="8" width="8">
                     <use href="#icon-tick-16"></use>
                 </svg>
             </div>
@@ -350,7 +350,7 @@ export const longOption = () => `
         <span class="btn__cell">
             <span class="btn__label">Color: </span>
             <span class="btn__text">Red with very very very long text</span>
-            <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-down-12"></use>
             </svg>
         </span>
@@ -363,7 +363,7 @@ export const longOption = () => `
                     <span class="clipped">.</span>
                     Small text
                 </span>
-                <svg class="icon icon--tick-16" height="8" width="8">
+                <svg class="icon icon--16" height="8" width="8">
                     <use href="#icon-tick-16"></use>
                 </svg>
             </div>
@@ -373,7 +373,7 @@ export const longOption = () => `
                     <span class="clipped">.</span>
                     Small blue text
                 </span>
-                <svg class="icon icon--tick-16" height="8" width="8">
+                <svg class="icon icon--16" height="8" width="8">
                     <use href="#icon-tick-16"></use>
                 </svg>
             </div>
@@ -383,7 +383,7 @@ export const longOption = () => `
                     <span class="clipped">.</span>
                     Small yellow text
                 </span>
-                <svg class="icon icon--tick-16" height="8" width="8">
+                <svg class="icon icon--16" height="8" width="8">
                     <use href="#icon-tick-16"></use>
                 </svg>
             </div>
@@ -398,7 +398,7 @@ export const longSubtitle = () => `
         <span class="btn__cell">
             <span class="btn__label">Color: </span>
             <span class="btn__text">Red</span>
-            <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-down-12"></use>
             </svg>
         </span>
@@ -411,7 +411,7 @@ export const longSubtitle = () => `
                     <span class="clipped">.</span>
                     There is a lot of text here in this subtitle even though red does not have much
                 </span>
-                <svg class="icon icon--tick-16" height="8" width="8">
+                <svg class="icon icon--16" height="8" width="8">
                     <use href="#icon-tick-16"></use>
                 </svg>
             </div>
@@ -421,7 +421,7 @@ export const longSubtitle = () => `
                     <span class="clipped">.</span>
                     Small blue text
                 </span>
-                <svg class="icon icon--tick-16" height="8" width="8">
+                <svg class="icon icon--16" height="8" width="8">
                     <use href="#icon-tick-16"></use>
                 </svg>
             </div>
@@ -431,7 +431,7 @@ export const longSubtitle = () => `
                     <span class="clipped">.</span>
                     Small yellow text
                 </span>
-                <svg class="icon icon--tick-16" height="8" width="8">
+                <svg class="icon icon--16" height="8" width="8">
                     <use href="#icon-tick-16"></use>
                 </svg>
             </div>

package/src/sass/marketsans/marketsans.scss

@@ -0,0 +1,46 @@
+@import "../variables/variables";
+
+/* eot: IE9 Compat Modes */
+/* eot?#iefix: IE6-IE8 */
+/* woff2: Super Modern Browsers */
+/* woff: Pretty Modern Browsers */
+/* truetypeL Safari, Android, iOS */
+/* svg: Legacy iOS */
+
+@font-face {
+    font-display: swap;
+    font-family: $marketsans-fontname;
+    font-style: normal;
+    font-weight: normal;
+    src: url("#{$marketsans-url}#{$marketsans-filename-regular}.eot");
+    src:
+        url("#{$marketsans-url}#{$marketsans-filename-regular}.eot?#iefix")
+            format("embedded-opentype"),
+        url("#{$marketsans-url}#{$marketsans-filename-regular}.woff2")
+            format("woff2"),
+        url("#{$marketsans-url}#{$marketsans-filename-regular}.woff")
+            format("woff"),
+        url("#{$marketsans-url}#{$marketsans-filename-regular}.ttf")
+            format("truetype"),
+        url("#{$marketsans-url}#{$marketsans-filename-regular}.svg##{$marketsans-filename-regular}")
+            format("svg");
+}
+
+@font-face {
+    font-display: swap;
+    font-family: $marketsans-fontname;
+    font-style: normal;
+    font-weight: bold;
+    src: url("#{$marketsans-url}#{$marketsans-filename-bold}.eot");
+    src:
+        url("#{$marketsans-url}#{$marketsans-filename-bold}.eot?#iefix")
+            format("embedded-opentype"),
+        url("#{$marketsans-url}#{$marketsans-filename-bold}.woff2")
+            format("woff2"),
+        url("#{$marketsans-url}#{$marketsans-filename-bold}.woff")
+            format("woff"),
+        url("#{$marketsans-url}#{$marketsans-filename-bold}.ttf")
+            format("truetype"),
+        url("#{$marketsans-url}#{$marketsans-filename-bold}.svg##{$marketsans-filename-bold}")
+            format("svg");
+}

package/src/{less/menu/menu.less → sass/menu/menu.scss}

@@ -1,12 +1,16 @@
-@import "../variables/variables.less";
-@import "../mixins/private/dropdown-mixins.less";
-@import "../mixins/private/menu-mixins.less";
-@import "../mixins/private/token-mixins.less";
+@import "../variables/variables";
+@import "../mixins/private/dropdown-mixins";
+@import "../mixins/private/menu-mixins";
+@import "../mixins/private/token-mixins";
 
 .menu__items,
 .fake-menu__items {
-    .background-color-token(menu-background-color, color-background-primary);
-    cursor: default; // override text cursor
+    @include background-color-token(
+        menu-background-color,
+        color-background-primary
+    );
+
+    cursor: default; /* override text cursor */
 }
 
 span.menu,
@@ -28,7 +32,7 @@ span.fake-menu__items {
 
 .menu__item > svg.icon--tick-16,
 .fake-menu__item > svg.icon--tick-16 {
-    .menu-menuitem-status();
+    @include menu-menuitem-status();
 }
 
 .menu__item > svg.icon--tick-16:last-child,
@@ -40,7 +44,8 @@ span.fake-menu__items {
 }
 
 a.fake-menu__item {
-    .color-token(menu-anchor-color, color-foreground-primary);
+    @include color-token(menu-anchor-color, color-foreground-primary);
+
     text-decoration: none;
 }
 
@@ -51,7 +56,7 @@ button.fake-menu__item {
 button.fake-menu__item,
 a.fake-menu__item,
 div.menu__item[role^="menuitem"] {
-    .menu-menuitem-base(menu);
+    @include menu-menuitem-base(menu);
 }
 
 a.fake-menu__item:focus {
@@ -66,7 +71,11 @@ button.fake-menu__item[aria-current="page"] svg.icon--tick-16 {
 a.fake-menu__item:not([href]),
 button.fake-menu__item[disabled],
 div.menu__item[role^="menuitem"][aria-disabled="true"] {
-    .color-token(menu-menuitem-disabled-foreground-color, color-foreground-disabled);
+    @include color-token(
+        menu-menuitem-disabled-foreground-color,
+        color-foreground-disabled
+    );
+
     background-color: unset;
     font-weight: unset;
 }
@@ -126,12 +135,13 @@ div.menu__item--badged[role^="menuitem"] span.badge {
 }
 
 hr.menu__separator {
-    .border-color-token(menu-separator-color, color-stroke-subtle);
+    @include border-color-token(menu-separator-color, color-stroke-subtle);
+
     border-style: solid;
     border-width: 1px;
 }
 
-// https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/
+/* https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/ */
 div.menu__item[role^="menuitem"]:focus:not(:focus-visible) {
     outline: none;
 }