From 7acaa87a34d2ffefed91c3704e59d9ae49e9aa7e Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <Maximilian.Franzke@deutschebahn.com>
Date: Wed, 24 Jul 2024 12:08:40 +0200
Subject: [PATCH 1/5] refactor: fix scss warnings

---
 .../00-base/icons/_icons.helpers.scss         | 52 ++++++++++---------
 .../mainnavigation/mainnavigation.scss        |  1 -
 .../overflow-menu/overflow-menu.scss          |  1 -
 .../02-components/sitesearch/sitesearch.scss  |  2 -
 source/_patterns/03-areas/00-header/meta.scss |  5 --
 .../_patterns/03-areas/03-footer/footer.scss  |  1 -
 6 files changed, 28 insertions(+), 34 deletions(-)

diff --git a/source/_patterns/00-base/icons/_icons.helpers.scss b/source/_patterns/00-base/icons/_icons.helpers.scss
index 6b0b2e23876..49ff75fbb60 100644
--- a/source/_patterns/00-base/icons/_icons.helpers.scss
+++ b/source/_patterns/00-base/icons/_icons.helpers.scss
@@ -37,32 +37,34 @@
 		}
 
 		@if $partial {
-			display: inline-block;
-			/*** icon - partial ***/
-			// * use !important to prevent issues with browser extensions that change fonts
-			font-family: var(--icon-font-family) !important;
-			font-style: normal;
-			font-variant: normal;
+			& {
+				display: inline-block;
+				/*** icon - partial ***/
+				// * use !important to prevent issues with browser extensions that change fonts
+				font-family: var(--icon-font-family) !important;
+				font-style: normal;
+				font-variant: normal;
 
-			font-weight: normal; // CSS variables fallback
-			font-weight: var(--icon-font-weight, normal);
-			line-height: 1;
-			text-transform: none;
-			vertical-align: middle;
+				font-weight: normal; // CSS variables fallback
+				font-weight: var(--icon-font-weight, normal);
+				line-height: 1;
+				text-transform: none;
+				vertical-align: middle;
 
-			/* stylelint-disable */
-			// * Better Font Rendering ===========
-			-webkit-font-smoothing: antialiased;
-			-moz-osx-font-smoothing: grayscale;
-			/* stylelint-enable */
+				/* stylelint-disable */
+				// * Better Font Rendering ===========
+				-webkit-font-smoothing: antialiased;
+				-moz-osx-font-smoothing: grayscale;
+				/* stylelint-enable */
 
-			// Hiding icon from screenreaders
-			/* stylelint-disable */
-			-webkit-alt: "";
-			/* stylelint-enable */
-			alt: "";
-			speak: none; // Hiding icon from screenreaders, fallback by older notation
-			speak: never; // Hiding icon from screenreaders
+				// Hiding icon from screenreaders
+				/* stylelint-disable */
+				-webkit-alt: "";
+				/* stylelint-enable */
+				alt: "";
+				speak: none; // Hiding icon from screenreaders, fallback by older notation
+				speak: never; // Hiding icon from screenreaders
+			}
 			@media aural {
 				content: none;
 			}
@@ -77,7 +79,9 @@
 
 // SCSS mixin for elements that text should get hidden in favour of only displaying the included icon
 @mixin is-icon-text-replace($position: "before") {
-	font-size: 0;
+	& {
+		font-size: 0;
+	}
 
 	@if $position == "before" {
 		&::before {
diff --git a/source/_patterns/02-components/mainnavigation/mainnavigation.scss b/source/_patterns/02-components/mainnavigation/mainnavigation.scss
index d03db0496c9..0013bd743aa 100644
--- a/source/_patterns/02-components/mainnavigation/mainnavigation.scss
+++ b/source/_patterns/02-components/mainnavigation/mainnavigation.scss
@@ -40,7 +40,6 @@
 	& > label[for] {
 		@include icon(glyph(menu), 24, "outline", $partial: $partial);
 		@include icon(glyph(close), 24, "outline", "after", $partial: $partial);
-
 		background-color: $header---backgroundColor; // TODO: This would need to get replaced by the correct (semantic) color
 
 		border-bottom: 1px solid $db-color-warm-gray-100;
diff --git a/source/_patterns/02-components/overflow-menu/overflow-menu.scss b/source/_patterns/02-components/overflow-menu/overflow-menu.scss
index 4ad5cf46654..e7093f03cc9 100644
--- a/source/_patterns/02-components/overflow-menu/overflow-menu.scss
+++ b/source/_patterns/02-components/overflow-menu/overflow-menu.scss
@@ -19,7 +19,6 @@
 			"outline",
 			$partial: $partial
 		);
-
 		display: inline-block;
 
 		&::before {
diff --git a/source/_patterns/02-components/sitesearch/sitesearch.scss b/source/_patterns/02-components/sitesearch/sitesearch.scss
index aa6e6a2d29c..5b70cf57163 100644
--- a/source/_patterns/02-components/sitesearch/sitesearch.scss
+++ b/source/_patterns/02-components/sitesearch/sitesearch.scss
@@ -30,7 +30,6 @@
 
 	.elm-label {
 		@include icon(glyph(search), 24, "outline", $partial: $partial);
-
 		display: inline-block;
 
 		&::before {
@@ -52,7 +51,6 @@
 
 	.elm-button {
 		@include icon(glyph(search), 24, "outline", $partial: $partial);
-
 		display: none;
 		left: 0;
 		position: absolute;
diff --git a/source/_patterns/03-areas/00-header/meta.scss b/source/_patterns/03-areas/00-header/meta.scss
index db73f64416e..dceab5197d3 100644
--- a/source/_patterns/03-areas/00-header/meta.scss
+++ b/source/_patterns/03-areas/00-header/meta.scss
@@ -30,16 +30,11 @@
 	& > .elm-link {
 		&[rel="account"] {
 			@include is-icon-text-replace();
-
 			margin-left: to-rem($pxValue: 4);
 
 			@media screen and (min-width: #{($header-srOnly-linkAccount-breakpoint + 1)}rem) {
 				margin-left: to-rem($pxValue: 8);
 			}
-
-			@media screen and (max-width: #{($header-srOnly-linkAccount-breakpoint)}rem) {
-				@include is-icon-text-replace();
-			}
 		}
 	}
 
diff --git a/source/_patterns/03-areas/03-footer/footer.scss b/source/_patterns/03-areas/03-footer/footer.scss
index 94bcb774d4c..34c2aca0051 100644
--- a/source/_patterns/03-areas/03-footer/footer.scss
+++ b/source/_patterns/03-areas/03-footer/footer.scss
@@ -6,7 +6,6 @@
 
 .rea-footer {
 	@include clearfix($partial: $partial);
-
 	background-color: $footer---backgroundColor;
 	box-shadow: $footer---boxShadow;
 

From 508abbd3d5a5f907a7c6f96a994c58660277d1a9 Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <Maximilian.Franzke@deutschebahn.com>
Date: Wed, 24 Jul 2024 12:30:06 +0200
Subject: [PATCH 2/5] refactor: fix scss warnings

---
 source/_patterns/01-elements/checkbox/checkbox.scss   |  1 +
 source/_patterns/01-elements/select/select.scss       | 11 ++++++-----
 source/_patterns/01-elements/textarea/textarea.scss   | 10 +++++-----
 source/_patterns/02-components/dialog/dialog.scss     |  1 -
 .../language-switcher/language-switcher.scss          |  1 -
 .../_patterns/02-components/link-list/link-list.scss  |  1 -
 6 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/source/_patterns/01-elements/checkbox/checkbox.scss b/source/_patterns/01-elements/checkbox/checkbox.scss
index 983cc4cc5a6..d5a74dc0884 100644
--- a/source/_patterns/01-elements/checkbox/checkbox.scss
+++ b/source/_patterns/01-elements/checkbox/checkbox.scss
@@ -13,6 +13,7 @@
 	@extend %form-element-enhanced-clickable-area;
 
 	@include icon("\00A0", 24, "outline", $partial: $partial);
+
 	align-content: center;
 
 	appearance: none;
diff --git a/source/_patterns/01-elements/select/select.scss b/source/_patterns/01-elements/select/select.scss
index aefa0f6990d..0d57339100d 100644
--- a/source/_patterns/01-elements/select/select.scss
+++ b/source/_patterns/01-elements/select/select.scss
@@ -15,11 +15,6 @@
 
 	// Style the regular (non-multiple) select elements
 	&:not([multiple]) {
-		// Semitransparent is the default style
-		@at-root :where(#{&}) {
-			@extend %form-element-semitransparent;
-		}
-
 		background-image: var(
 			--db-ic-expand-more-20,
 			url(#{$icons-path}functional/images/navigation/db_ic_expand_more_20.svg)
@@ -28,6 +23,12 @@
 		background-repeat: no-repeat;
 		height: to-rem($pxValue: 44);
 		padding: to-rem($pxValue: 20) to-rem($pxValue: 42) 0 $db-spacing-m;
+
+		// Semitransparent is the default style
+		@at-root :where(#{&}) {
+			@extend %form-element-semitransparent;
+		}
+
 		// No need to reposition the included value on hidden label
 		&:has(+ label[data-label-hidden="true"]) {
 			padding-top: 0;
diff --git a/source/_patterns/01-elements/textarea/textarea.scss b/source/_patterns/01-elements/textarea/textarea.scss
index b7d60120802..2b774694482 100644
--- a/source/_patterns/01-elements/textarea/textarea.scss
+++ b/source/_patterns/01-elements/textarea/textarea.scss
@@ -7,11 +7,6 @@
 .elm-textarea {
 	@extend %form-element;
 
-	// Semitransparent is the default style
-	@at-root :where(#{&}) {
-		@extend %form-element-semitransparent;
-	}
-
 	display: block;
 
 	font-size: to-rem($pxValue: 16);
@@ -25,6 +20,11 @@
 
 	width: 100%;
 
+	// Semitransparent is the default style
+	@at-root :where(#{&}) {
+		@extend %form-element-semitransparent;
+	}
+
 	// * to be evaluated
 	// display: inline-flex;
 	// align-items: center;
diff --git a/source/_patterns/02-components/dialog/dialog.scss b/source/_patterns/02-components/dialog/dialog.scss
index 01cb407cc20..c682c3abb52 100644
--- a/source/_patterns/02-components/dialog/dialog.scss
+++ b/source/_patterns/02-components/dialog/dialog.scss
@@ -72,7 +72,6 @@
 			&.is-close {
 				@include icon(glyph(close), 24, "outline", $partial: $partial);
 				@include is-icon-text-replace();
-
 				position: absolute;
 				right: 0;
 				top: 0;
diff --git a/source/_patterns/02-components/language-switcher/language-switcher.scss b/source/_patterns/02-components/language-switcher/language-switcher.scss
index 6962dc54a32..305e288509b 100644
--- a/source/_patterns/02-components/language-switcher/language-switcher.scss
+++ b/source/_patterns/02-components/language-switcher/language-switcher.scss
@@ -102,7 +102,6 @@
 					"after",
 					$partial: $partial
 				);
-
 				padding-bottom: to-rem($pxValue: 22);
 
 				&:hover {
diff --git a/source/_patterns/02-components/link-list/link-list.scss b/source/_patterns/02-components/link-list/link-list.scss
index 7dd6e1e882a..67c0a933f28 100644
--- a/source/_patterns/02-components/link-list/link-list.scss
+++ b/source/_patterns/02-components/link-list/link-list.scss
@@ -9,7 +9,6 @@
 	li {
 		.elm-link {
 			@include icon(glyph(chevron-right), $partial: $partial);
-
 			font-weight: 700;
 			text-decoration: none;
 

From 4ac898b8d714e038b59a848143646ab0a375bf02 Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <Maximilian.Franzke@deutschebahn.com>
Date: Wed, 24 Jul 2024 12:34:46 +0200
Subject: [PATCH 3/5] refactor: fix scss warnings

---
 source/_patterns/00-base/icons/_icons.helpers.scss | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/source/_patterns/00-base/icons/_icons.helpers.scss b/source/_patterns/00-base/icons/_icons.helpers.scss
index 49ff75fbb60..722eea8e680 100644
--- a/source/_patterns/00-base/icons/_icons.helpers.scss
+++ b/source/_patterns/00-base/icons/_icons.helpers.scss
@@ -8,7 +8,9 @@
 ) {
 	// We're setting this on the parent tag, so that it could get overwritten via data-icon=*
 	@if $glyph != "" {
-		--icon-glyph-#{$position}: "#{$glyph}";
+		& {
+			--icon-glyph-#{$position}: "#{$glyph}";
+		}
 	}
 
 	&::#{$position} {

From bdc2b65cf8fd56f7d631879b5346c8b1e6a00994 Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <Maximilian.Franzke@deutschebahn.com>
Date: Wed, 24 Jul 2024 12:36:00 +0200
Subject: [PATCH 4/5] refactor: fix scss warnings

---
 source/_patterns/03-areas/03-footer/footer.scss | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/source/_patterns/03-areas/03-footer/footer.scss b/source/_patterns/03-areas/03-footer/footer.scss
index 34c2aca0051..d23e9ff6793 100644
--- a/source/_patterns/03-areas/03-footer/footer.scss
+++ b/source/_patterns/03-areas/03-footer/footer.scss
@@ -5,7 +5,6 @@
 @import "footer.variables";
 
 .rea-footer {
-	@include clearfix($partial: $partial);
 	background-color: $footer---backgroundColor;
 	box-shadow: $footer---boxShadow;
 
@@ -13,6 +12,10 @@
 	margin-top: $footer---marginTop;
 	padding: #{to-rem($pxValue: 21)} #{to-rem($pxValue: 16)};
 
+	& {
+		@include clearfix($partial: $partial);
+	}
+
 	&.has-border {
 		border-top: $footer---borderTop;
 	}

From 5241c880b4bb37c73cda75281ad4c0d5a391e405 Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <Maximilian.Franzke@deutschebahn.com>
Date: Wed, 24 Jul 2024 12:41:53 +0200
Subject: [PATCH 5/5] refactor: fix scss warnings

---
 .../01-elements/checkbox/checkbox.scss          |  9 +++++----
 .../02-components/accordion/accordion.scss      | 17 ++++++++++-------
 .../_patterns/02-components/dialog/dialog.scss  | 12 ++++++++++--
 .../language-switcher/language-switcher.scss    | 17 ++++++++++-------
 .../02-components/link-list/link-list.scss      |  5 ++++-
 .../mainnavigation/mainnavigation.scss          | 13 +++++++++++--
 .../overflow-menu/overflow-menu.scss            | 15 +++++++++------
 .../02-components/sitesearch/sitesearch.scss    | 10 ++++++++--
 source/_patterns/03-areas/00-header/meta.scss   |  5 ++++-
 9 files changed, 71 insertions(+), 32 deletions(-)

diff --git a/source/_patterns/01-elements/checkbox/checkbox.scss b/source/_patterns/01-elements/checkbox/checkbox.scss
index d5a74dc0884..a2367238b5a 100644
--- a/source/_patterns/01-elements/checkbox/checkbox.scss
+++ b/source/_patterns/01-elements/checkbox/checkbox.scss
@@ -10,10 +10,6 @@
 		#{to-rem($pxValue: 24)}
 	);
 
-	@extend %form-element-enhanced-clickable-area;
-
-	@include icon("\00A0", 24, "outline", $partial: $partial);
-
 	align-content: center;
 
 	appearance: none;
@@ -27,6 +23,11 @@
 	justify-content: center;
 	width: var(--db-form-element-dimensions);
 
+	& {
+		@extend %form-element-enhanced-clickable-area;
+		@include icon("\00A0", 24, "outline", $partial: $partial);
+	}
+
 	&[type="checkbox"] {
 		vertical-align: top;
 	}
diff --git a/source/_patterns/02-components/accordion/accordion.scss b/source/_patterns/02-components/accordion/accordion.scss
index e49c93f3006..d8dbd5c995e 100644
--- a/source/_patterns/02-components/accordion/accordion.scss
+++ b/source/_patterns/02-components/accordion/accordion.scss
@@ -8,13 +8,6 @@
 	padding-right: $accordion---paddingRight;
 
 	summary {
-		@include icon(
-			glyph(expand-more),
-			24,
-			"outline",
-			"after",
-			$partial: $partial
-		);
 		align-items: center;
 		display: flex;
 		justify-content: space-between;
@@ -26,6 +19,16 @@
 			100% + var(--db-accordion---paddingLeft) + #{$accordion---paddingRight}
 		);
 
+		& {
+			@include icon(
+				glyph(expand-more),
+				24,
+				"outline",
+				"after",
+				$partial: $partial
+			);
+		}
+
 		// Replace existing marker with an icon from the library
 		&::-webkit-details-marker {
 			display: none;
diff --git a/source/_patterns/02-components/dialog/dialog.scss b/source/_patterns/02-components/dialog/dialog.scss
index c682c3abb52..2a6bc0752cc 100644
--- a/source/_patterns/02-components/dialog/dialog.scss
+++ b/source/_patterns/02-components/dialog/dialog.scss
@@ -70,11 +70,19 @@
 
 		.elm-link {
 			&.is-close {
-				@include icon(glyph(close), 24, "outline", $partial: $partial);
-				@include is-icon-text-replace();
 				position: absolute;
 				right: 0;
 				top: 0;
+
+				& {
+					@include icon(
+						glyph(close),
+						24,
+						"outline",
+						$partial: $partial
+					);
+					@include is-icon-text-replace();
+				}
 			}
 		}
 	}
diff --git a/source/_patterns/02-components/language-switcher/language-switcher.scss b/source/_patterns/02-components/language-switcher/language-switcher.scss
index 305e288509b..9c88b21f753 100644
--- a/source/_patterns/02-components/language-switcher/language-switcher.scss
+++ b/source/_patterns/02-components/language-switcher/language-switcher.scss
@@ -95,15 +95,18 @@
 
 			.elm-link,
 			.elm-button {
-				@include icon(
-					glyph(expand-more),
-					24,
-					"outline",
-					"after",
-					$partial: $partial
-				);
 				padding-bottom: to-rem($pxValue: 22);
 
+				& {
+					@include icon(
+						glyph(expand-more),
+						24,
+						"outline",
+						"after",
+						$partial: $partial
+					);
+				}
+
 				&:hover {
 					color: $db-color-red-500;
 				}
diff --git a/source/_patterns/02-components/link-list/link-list.scss b/source/_patterns/02-components/link-list/link-list.scss
index 67c0a933f28..b19dd1eb9fb 100644
--- a/source/_patterns/02-components/link-list/link-list.scss
+++ b/source/_patterns/02-components/link-list/link-list.scss
@@ -8,10 +8,13 @@
 
 	li {
 		.elm-link {
-			@include icon(glyph(chevron-right), $partial: $partial);
 			font-weight: 700;
 			text-decoration: none;
 
+			& {
+				@include icon(glyph(chevron-right), $partial: $partial);
+			}
+
 			&:hover,
 			&:active {
 				text-decoration: underline;
diff --git a/source/_patterns/02-components/mainnavigation/mainnavigation.scss b/source/_patterns/02-components/mainnavigation/mainnavigation.scss
index 0013bd743aa..06f62665f33 100644
--- a/source/_patterns/02-components/mainnavigation/mainnavigation.scss
+++ b/source/_patterns/02-components/mainnavigation/mainnavigation.scss
@@ -38,8 +38,6 @@
 	}
 
 	& > label[for] {
-		@include icon(glyph(menu), 24, "outline", $partial: $partial);
-		@include icon(glyph(close), 24, "outline", "after", $partial: $partial);
 		background-color: $header---backgroundColor; // TODO: This would need to get replaced by the correct (semantic) color
 
 		border-bottom: 1px solid $db-color-warm-gray-100;
@@ -47,6 +45,17 @@
 		display: block;
 		padding: to-rem($pxValue: 8) to-rem($pxValue: 22) to-rem($pxValue: 10);
 
+		& {
+			@include icon(glyph(menu), 24, "outline", $partial: $partial);
+			@include icon(
+				glyph(close),
+				24,
+				"outline",
+				"after",
+				$partial: $partial
+			);
+		}
+
 		&::before {
 			margin-right: to-rem($pxValue: 16);
 		}
diff --git a/source/_patterns/02-components/overflow-menu/overflow-menu.scss b/source/_patterns/02-components/overflow-menu/overflow-menu.scss
index e7093f03cc9..669fc5025d3 100644
--- a/source/_patterns/02-components/overflow-menu/overflow-menu.scss
+++ b/source/_patterns/02-components/overflow-menu/overflow-menu.scss
@@ -13,14 +13,17 @@
 	}
 
 	summary {
-		@include icon(
-			$cmp-overflow-menu-icon,
-			20,
-			"outline",
-			$partial: $partial
-		);
 		display: inline-block;
 
+		& {
+			@include icon(
+				$cmp-overflow-menu-icon,
+				20,
+				"outline",
+				$partial: $partial
+			);
+		}
+
 		&::before {
 			display: inline-block;
 			padding: to-rem($pxValue: 9) to-rem($pxValue: 12);
diff --git a/source/_patterns/02-components/sitesearch/sitesearch.scss b/source/_patterns/02-components/sitesearch/sitesearch.scss
index 5b70cf57163..c511bac7c55 100644
--- a/source/_patterns/02-components/sitesearch/sitesearch.scss
+++ b/source/_patterns/02-components/sitesearch/sitesearch.scss
@@ -29,9 +29,12 @@
 	}
 
 	.elm-label {
-		@include icon(glyph(search), 24, "outline", $partial: $partial);
 		display: inline-block;
 
+		& {
+			@include icon(glyph(search), 24, "outline", $partial: $partial);
+		}
+
 		&::before {
 			// TODO: Evaluate on whether this declaration could get moved to the general icon declarations
 			font-size: to-rem($pxValue: 22);
@@ -50,13 +53,16 @@
 	}
 
 	.elm-button {
-		@include icon(glyph(search), 24, "outline", $partial: $partial);
 		display: none;
 		left: 0;
 		position: absolute;
 		top: to-em($pxValue: 8);
 		visibility: hidden;
 
+		& {
+			@include icon(glyph(search), 24, "outline", $partial: $partial);
+		}
+
 		&::before {
 			left: to-rem($pxValue: 4);
 			margin: -9px;
diff --git a/source/_patterns/03-areas/00-header/meta.scss b/source/_patterns/03-areas/00-header/meta.scss
index dceab5197d3..1b6ec93f9ec 100644
--- a/source/_patterns/03-areas/00-header/meta.scss
+++ b/source/_patterns/03-areas/00-header/meta.scss
@@ -29,9 +29,12 @@
 
 	& > .elm-link {
 		&[rel="account"] {
-			@include is-icon-text-replace();
 			margin-left: to-rem($pxValue: 4);
 
+			& {
+				@include is-icon-text-replace();
+			}
+
 			@media screen and (min-width: #{($header-srOnly-linkAccount-breakpoint + 1)}rem) {
 				margin-left: to-rem($pxValue: 8);
 			}