From 2e198a3dfcc4482a47c7b752f69c29c732cae867 Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <787658+mfranzke@users.noreply.github.com>
Date: Wed, 13 Sep 2023 16:54:11 +0200
Subject: [PATCH] fix(accordion): arrow alignment (#571)

fix: arrow alignment
---
 .../accordion/_accordion.variables.scss       |  2 +-
 .../02-components/accordion/accordion.scss    | 23 ++++++++++++-------
 2 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/source/_patterns/02-components/accordion/_accordion.variables.scss b/source/_patterns/02-components/accordion/_accordion.variables.scss
index b6d028fe99..2e0f386a4f 100644
--- a/source/_patterns/02-components/accordion/_accordion.variables.scss
+++ b/source/_patterns/02-components/accordion/_accordion.variables.scss
@@ -2,7 +2,7 @@
 @import "../../00-base/icons/icons.variables";
 @import "../../00-base/icons/icons.helpers";
 
-$accordion---paddingLeft: 46 !default;
+$accordion---paddingLeft: $db-spacing-m !default;
 $accordion---paddingRight: to-rem(
 	$pxValue: 16
 ) !default;
diff --git a/source/_patterns/02-components/accordion/accordion.scss b/source/_patterns/02-components/accordion/accordion.scss
index 33d309a9f7..e49c93f300 100644
--- a/source/_patterns/02-components/accordion/accordion.scss
+++ b/source/_patterns/02-components/accordion/accordion.scss
@@ -8,9 +8,16 @@
 	padding-right: $accordion---paddingRight;
 
 	summary {
-		@include icon(glyph(chevron-right), 24, "outline", $partial: $partial);
+		@include icon(
+			glyph(expand-more),
+			24,
+			"outline",
+			"after",
+			$partial: $partial
+		);
 		align-items: center;
 		display: flex;
+		justify-content: space-between;
 
 		padding-block: $db-spacing-sm;
 		// Negating the padding left for moving the element into that direction with the same measures
@@ -29,9 +36,9 @@
 		}
 
 		// Icon horizontal space
-		&::before {
-			--icon-margin-after: #{to-rem($pxValue: 8)};
-			margin-left: #{to-rem($pxValue: 14)};
+		&::after {
+			--icon-margin-before: #{to-rem($pxValue: 8)};
+			margin-right: #{to-rem($pxValue: 14)};
 		}
 
 		& + p {
@@ -40,7 +47,7 @@
 	}
 	// TODO: This might get simplified in the future with @nest
 	&[open] > summary {
-		&::before {
+		&::after {
 			content: glyph(expand-less);
 		}
 	}
@@ -56,7 +63,7 @@
 			font-weight: 700;
 			height: to-rem($pxValue: 56);
 
-			&::before {
+			&::after {
 				--icon-font-size: #{to-rem($pxValue: 32)};
 			}
 		}
@@ -78,7 +85,7 @@
 			// ToDo: This needs to get replaced by the correct variable
 			padding-block: 0.59375rem;
 
-			&::before {
+			&::after {
 				--icon-font-size: #{to-rem($pxValue: 20)};
 				--icon-margin-after: #{to-rem($pxValue: 6)};
 				margin-left: #{to-rem($pxValue: 6)};
@@ -96,7 +103,7 @@
 			font-size: to-rem($pxValue: 20);
 			padding-block: $db-spacing-m;
 
-			&::before {
+			&::after {
 				--icon-font-size: #{to-rem($pxValue: 32)};
 			}
 		}