From bd6a9cc2c14a15572f9c8f12ef424c56bfdf087d Mon Sep 17 00:00:00 2001
From: Philipp Stracker <p.stracker@syde.com>
Date: Wed, 22 Jan 2025 17:54:46 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Fix=20some=20Accordion=20styling?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../reusable-components/_accordion-section.scss    | 13 ++++++-------
 .../reusable-components/_settings-block.scss       | 14 ++++++--------
 2 files changed, 12 insertions(+), 15 deletions(-)

diff --git a/modules/ppcp-settings/resources/css/components/reusable-components/_accordion-section.scss b/modules/ppcp-settings/resources/css/components/reusable-components/_accordion-section.scss
index d4894abd8..6e6d782d3 100644
--- a/modules/ppcp-settings/resources/css/components/reusable-components/_accordion-section.scss
+++ b/modules/ppcp-settings/resources/css/components/reusable-components/_accordion-section.scss
@@ -2,7 +2,7 @@
 	margin-left: auto;
 	margin-right: auto;
 
-	&__toggler {
+	.ppcp--toggler {
 		display: block;
 		cursor: pointer;
 
@@ -10,19 +10,18 @@
 		border: 0;
 		box-shadow: none;
 		padding: 0;
-		margin: 24px auto;
+		text-align: var(--accordion-text-align, center);
+		width: var(--accordion-width, auto);
+		margin: var(--accordion-toggler-gap, 24px) auto;
 	}
 
-	&__title-wrapper {
-		@include font(14, 32, 450);
-		color: $color-gray-900;
-
+	.ppcp--title-wrapper {
 		display: flex;
 		align-items: center;
 		gap: 16px;
 	}
 
-	&__content {
+	.ppcp--content {
 		margin: 24px 0 0;
 	}
 }
diff --git a/modules/ppcp-settings/resources/css/components/reusable-components/_settings-block.scss b/modules/ppcp-settings/resources/css/components/reusable-components/_settings-block.scss
index 58fdd3e3b..5b1d04dd4 100644
--- a/modules/ppcp-settings/resources/css/components/reusable-components/_settings-block.scss
+++ b/modules/ppcp-settings/resources/css/components/reusable-components/_settings-block.scss
@@ -37,14 +37,12 @@
 	}
 }
 
-.ppcp-r-settings-block__accordion {
-	> .ppcp-r-accordion {
-		width: 100%;
+.ppcp-r-accordion {
+	--accordion-width: 100%;
+	--accordion-toggler-gap: 0;
+	--accordion-text-align: left;
 
-		.ppcp-r-accordion__toggler {
-			width: 100%;
-			margin: 0;
-			text-align: unset;
-		}
+	.ppcp--title-wrapper {
+		justify-content: space-between;
 	}
 }