chore: fixed linting rules

.stylelintrc

@@ -17,32 +17,18 @@
         "no-descending-specificity": null,
         "no-duplicate-selectors": null,
         "rule-empty-line-before": null,
-        "no-invalid-double-slash-comments": null,
         "color-function-notation": "legacy",
         "property-no-vendor-prefix": null,
         "selector-no-vendor-prefix": null,
+        "value-no-vendor-prefix": null,
         "selector-class-pattern": null,
         "alpha-value-notation": "number",
-        "value-no-vendor-prefix": null,
-        "import-notation": "string",
         "declaration-block-no-redundant-longhand-properties": null,
-        "at-rule-empty-line-before": null,
-        "media-feature-range-notation": "prefix",
-        "media-query-no-invalid": null,
-        "at-rule-no-unknown": null,
         "value-keyword-case": [
             "lower",
             {
                 "camelCaseSvgKeywords": true
             }
-        ],
-        "function-no-unknown": [
-            true,
-            {
-                "ignoreFunctions": [
-                    "fade"
-                ]
-            }
         ]
     },
     "overrides": [
@@ -60,12 +46,13 @@
             "rules": {
                 "scss/at-mixin-argumentless-call-parentheses": null,
                 "scss/dollar-variable-pattern": null,
+                "order/properties-alphabetical-order": true,
                 "value-keyword-case": [
                     "lower",
                     {
                         "camelCaseSvgKeywords": true
                     }
-                ],
+                ]
             }
         }
     ]

dist/carousel/carousel.css

@@ -139,9 +139,9 @@ div.carousel {
     margin-inline-end: 1px;
 }
 .carousel__control--next {
-    right: calc(var(--spacing-200) * -1);
     -webkit-margin-start: 1px;
     margin-inline-start: 1px;
+    right: calc(var(--spacing-200) * -1);
 }
 .carousel__control svg {
     color: var(

dist/eek/eek.css

@@ -125,7 +125,7 @@
     font-size: 8px;
 }
 @media not all and (-webkit-min-device-pixel-ratio: 0),
-    not all and (min-resolution: 0.001dpcm) {
+    not all and (resolution >= 0.001dpcm) {
     @supports (-webkit-appearance: none) {
         .eek__rating {
             text-shadow: none;

dist/filter-menu-button/filter-menu-button.css

@@ -64,11 +64,11 @@ button.filter-menu-button__button:hover {
 }
 .filter-menu-button__button-cell svg.icon--12 {
     align-self: center;
+    -webkit-margin-start: 8px;
     color: var(
         --filter-menu-button-icon-color,
         var(--color-foreground-primary)
     );
-    -webkit-margin-start: 8px;
     margin-inline-start: 8px;
 }
 
@@ -318,9 +318,8 @@ button.filter-menu-button__footer {
         var(--color-background-elevated)
     );
     border: none;
+    border-top: 1px solid;
     border-color: var(--filter-menu-border-color, var(--color-stroke-subtle));
-    border-top-style: solid;
-    border-top-width: 1px;
     bottom: 0;
     box-sizing: border-box;
     color: var(

dist/filter-menu/filter-menu.css

@@ -121,9 +121,8 @@ button.filter-menu__footer {
         var(--color-background-elevated)
     );
     border: none;
+    border-top: 1px solid;
     border-color: var(--filter-menu-border-color, var(--color-stroke-subtle));
-    border-top-style: solid;
-    border-top-width: 1px;
     bottom: 0;
     box-sizing: border-box;
     color: var(

dist/textbox/textbox.css

@@ -166,10 +166,10 @@ input.textbox__control {
 .textbox > svg {
     color: var(--textbox-icon-color, var(--color-foreground-secondary));
     display: inline-flex;
-    fill: var(--textbox-icon-color, var(--color-foreground-secondary));
     height: 1lh;
     pointer-events: none;
     width: 14px;
+    fill: var(--textbox-icon-color, var(--color-foreground-secondary));
 }
 
 .textbox > span:first-child,

dist/toast-dialog/toast-dialog.css

@@ -75,12 +75,12 @@
 button.toast-dialog__close {
     align-self: flex-start;
     border: 0;
+    flex-shrink: 0;
+    -webkit-margin-start: auto;
     color: var(
         --toast-dialog-foreground-color,
         var(--color-foreground-on-information)
     );
-    flex-shrink: 0;
-    -webkit-margin-start: auto;
     margin-inline-start: auto;
     outline-offset: calc(var(--spacing-100) * -1);
     padding: 0;
@@ -123,12 +123,12 @@ button.toast-dialog__close > svg {
 }
 .toast-dialog__footer button.btn--secondary {
     background-color: initial;
+    font-weight: 700;
+    -webkit-margin-end: var(--spacing-100);
     color: var(
         --toast-dialog-foreground-color,
         var(--color-background-primary)
     );
-    font-weight: 700;
-    -webkit-margin-end: var(--spacing-100);
     margin-inline-end: var(--spacing-100);
 }
 .toast-dialog__footer button.btn--primary:focus,

src/sass/badge/badge.scss

@@ -3,19 +3,17 @@
 
 .badge {
     align-items: center;
-    @include background-color-token(
-        badge-background-color,
-        color-background-attention
-    );
-
     border-radius: 16px;
-    @include color-token(badge-foreground-color, color-foreground-on-attention);
-
     display: inline-flex;
     font-size: 10px;
     height: 16px;
     justify-content: center;
     min-width: 8px;
     padding: 2px 6px;
     white-space: nowrap;
+    @include background-color-token(
+        badge-background-color,
+        color-background-attention
+    );
+    @include color-token(badge-foreground-color, color-foreground-on-attention);
 }

src/sass/button/button.scss

@@ -467,9 +467,8 @@ a.fake-btn--small {
 button.btn--form,
 a.fake-btn--form {
     border-color: inherit;
-    @include border-radius-token(expand-btn-border-radius, border-radius-50);
-
     max-width: 100%;
+    @include border-radius-token(expand-btn-border-radius, border-radius-50);
 }
 
 button.btn--form:not([disabled], [aria-disabled="true"]),

src/sass/carousel/carousel.scss

@@ -25,17 +25,12 @@ $ebay-carousel-transition-function: ease-in-out;
     }
 
     &--next {
-        right: calc(var(--spacing-200) * -1);
         margin-inline-start: 1px;
+        right: calc(var(--spacing-200) * -1);
     }
 
     align-items: center;
     border: 1px solid;
-    @include border-color-token(
-        carousel-paddle-border-color,
-        color-stroke-subtle
-    );
-
     border-radius: 16px;
     box-shadow:
         0 2px 2px 0 rgba(0, 0, 0, 0.24),
@@ -53,6 +48,10 @@ $ebay-carousel-transition-function: ease-in-out;
         $ebay-carousel-transition-function;
     width: 32px;
     z-index: 1;
+    @include border-color-token(
+        carousel-paddle-border-color,
+        color-stroke-subtle
+    );
 
     svg {
         @include color-token(
@@ -144,11 +143,6 @@ $ebay-carousel-transition-function: ease-in-out;
         border-radius: 50%;
         bottom: 16px; /* accounts for padding. */
         box-sizing: border-box;
-        @include color-token(
-            carousel-playback-foreground-color,
-            color-foreground-on-inverse
-        );
-
         height: 40px;
         margin-bottom: 19px;
         margin-right: 19px;
@@ -158,6 +152,10 @@ $ebay-carousel-transition-function: ease-in-out;
         text-align: center;
         width: 40px;
         z-index: 2;
+        @include color-token(
+            carousel-playback-foreground-color,
+            color-foreground-on-inverse
+        );
 
         svg {
             opacity: 0.75;

src/sass/checkbox/checkbox.scss

@@ -102,9 +102,8 @@ input.checkbox__control[type="checkbox"][disabled] + span.checkbox__icon {
 /* https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/ */
 input.checkbox__control[type="checkbox"]:focus + span.checkbox__icon {
     outline: 1px auto;
-    @include outline-color-token(checkbox-outline, color-foreground-secondary);
-
     outline-offset: 2px;
+    @include outline-color-token(checkbox-outline, color-foreground-secondary);
 }
 
 input.checkbox__control[type="checkbox"]:focus:not(:focus-visible)

src/sass/combobox/combobox.scss

@@ -102,33 +102,31 @@ span.combobox {
 
 .combobox__control > input {
     appearance: none;
-    @include background-color-token(
-        combobox-textbox-background-color,
-        color-background-secondary
-    );
-    @include border-color-token(
-        combobox-textbox-border-color,
-        color-stroke-default
-    );
-
     border-radius: var(
         --combobox-textbox-border-radius,
         var(--border-radius-50)
     );
     border-style: solid;
     border-width: 1px;
     box-sizing: border-box;
-    @include color-token(
-        combobox-textbox-foreground-color,
-        color-foreground-on-secondary
-    );
-
     font-family: inherit;
     font-size: inherit;
     height: $height-textbox;
     margin-left: 0;
     margin-right: 0;
     padding: 0 32px 0 16px;
+    @include background-color-token(
+        combobox-textbox-background-color,
+        color-background-secondary
+    );
+    @include border-color-token(
+        combobox-textbox-border-color,
+        color-stroke-default
+    );
+    @include color-token(
+        combobox-textbox-foreground-color,
+        color-foreground-on-secondary
+    );
 
     &[readonly] {
         @include color-token(

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

@@ -15,12 +15,11 @@ a.cta-btn {
         --cta-btn-border-radius,
         calc($button-height-regular / 2)
     );
-    @include color-token(cta-btn-foreground-color, color-foreground-primary);
-
     display: inline-block;
     font-size: var(--font-size-default);
     max-width: 100%;
     padding: $button-padding-vertical 20px;
+    @include color-token(cta-btn-foreground-color, color-foreground-primary);
 }
 
 a.cta-btn:visited {

src/sass/eek/eek.scss

@@ -143,7 +143,9 @@ $eek-border-color: $eek-color;
 In Safari the EEK icon is not aligned properly as well as the text is broken
 Changed a bit of styles there only in order to make it work
 */
-@media not all and (min-resolution: 0.001dpcm) {
+/* stylelint-disable-next-line media-feature-name-no-vendor-prefix */
+@media not all and (-webkit-min-device-pixel-ratio: 0),
+    not all and (resolution >= 0.001dpcm) {
     @supports (-webkit-appearance: none) {
         .eek__rating {
             text-shadow: none;

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

@@ -46,12 +46,11 @@ button.filter-menu-button__button {
 
     svg.icon--12 {
         align-self: center;
+        margin-inline-start: 8px;
         @include color-token(
             filter-menu-button-icon-color,
             color-foreground-primary
         );
-
-        margin-inline-start: 8px;
     }
 }
 
@@ -273,14 +272,13 @@ button.filter-menu-button__footer {
     @include filter-menu-item-base();
 
     border: none;
-    @include border-color-token(filter-menu-border-color, color-stroke-subtle);
-
     border-top-style: solid;
     border-top-width: 1px;
     bottom: 0;
     outline-offset: -10;
     padding: 16px;
     transform: translateZ(0);
+    @include border-color-token(filter-menu-border-color, color-stroke-subtle);
 
     &:focus,
     &:hover {

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

@@ -84,12 +84,11 @@ button.filter-menu-form__footer[type="submit"] {
     @include filter-menu-item-base();
 
     border: none;
-    @include border-color-token(filter-menu-border-color, color-stroke-subtle);
-
     border-top-style: solid;
     border-top-width: 1px;
     bottom: 0;
     padding: 16px;
+    @include border-color-token(filter-menu-border-color, color-stroke-subtle);
 
     &:hover {
         background-color: var(--color-state-primary-hover);

src/sass/lightbox-dialog/lightbox-dialog.scss

@@ -199,20 +199,20 @@ button.icon-btn.lightbox-dialog__prev {
 .lightbox-dialog--fullscreen .lightbox-dialog__window,
 .lightbox-dialog--large .lightbox-dialog__window {
     align-self: center;
-    margin: var(--spacing-100);
     height: 70%;
+    margin: var(--spacing-100);
 
     // This is needed like this becuase max-height 100% would cause a scroll overflow
     max-height: 95%;
 }
 
 @media (max-width: $_screen-size-SM) {
     .lightbox-dialog--large .lightbox-dialog__window {
-        width: 100%;
         height: 95%;
 
         // This is needed like this becuase max-height 100% would cause a scroll overflow
         max-height: 95%;
+        width: 100%;
     }
 
     .lightbox-dialog--fullscreen .lightbox-dialog__window {

src/sass/link/link.scss

@@ -37,12 +37,11 @@ a.standalone-link {
 button.fake-link {
     background-color: transparent;
     border: 0;
-    @include color-token(fake-link-foreground-color, color-foreground-primary);
-
     font-family: inherit;
     font-size: inherit;
     padding: 0;
     text-decoration: underline;
+    @include color-token(fake-link-foreground-color, color-foreground-primary);
 
     &:hover {
         @include color-token(