From b5b4e3ada690e86ada210760f0300471d8d48a4e Mon Sep 17 00:00:00 2001
From: Joe Dolson <joedolson@git.wordpress.org>
Date: Thu, 6 Feb 2025 22:24:51 +0000
Subject: [PATCH] General: Add styles for extender usage of
 `do_accordion_section()`.

Follow up to [59224]. Add CSS to cover usage of the `do_accordion_section()` function when used in extender contexts outside of the existing WordPress core usage.

Props mboynes, jorbin, joemcgill, joedolson.
Fixes #62907.

git-svn-id: https://develop.svn.wordpress.org/trunk@59772 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/common.css             | 20 ++++++++++++++++++--
 src/wp-admin/css/customize-controls.css |  3 ++-
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css
index 16f3ae8862..d2e2ed8b2a 100644
--- a/src/wp-admin/css/common.css
+++ b/src/wp-admin/css/common.css
@@ -2433,6 +2433,12 @@ h1.nav-tab-wrapper, /* Back-compat for pre-4.4 */
 .nav-menus-php .metabox-holder h3 {
 	padding: 0;
 }
+
+.accordion-container h3.accordion-section-title {
+	padding: 0 !important;
+}
+
+.accordion-section-title button.accordion-trigger,
 .nav-menus-php .metabox-holder .accordion-section-title button.accordion-trigger {
 	background: inherit;
 	color: #1d2327;
@@ -2446,27 +2452,38 @@ h1.nav-tab-wrapper, /* Back-compat for pre-4.4 */
 	line-height: 1.5;
 	cursor: pointer;
 }
+
+.accordion-section-title button.accordion-trigger:focus,
 .nav-menus-php .metabox-holder .accordion-section-title button.accordion-trigger:focus {
 	box-shadow: 0 0 0 2px #2271b1;
 	outline: 2px solid transparent;
 }
+
+.accordion-section-title span.dashicons.dashicons-arrow-down,
 .nav-menus-php .metabox-holder .accordion-section-title span.dashicons.dashicons-arrow-down {
 	position: absolute;
 	right: 10px;
 	left: auto;
 	color: #787c82;
 	border-radius: 50px;
+	top: 50%;
+	transform: translateY(-50%);
 }
+
+.accordion-section-title:hover span.dashicons.dashicons-arrow-down,
 .nav-menus-php .metabox-holder .accordion-section-title:hover span.dashicons.dashicons-arrow-down {
 	color: #1d2327;
 }
+
+.accordion-section-title span.dashicons.dashicons-arrow-down::before,
 .nav-menus-php .metabox-holder .accordion-section-title span.dashicons.dashicons-arrow-down::before {
 	position: relative;
 	left: -1px;
 }
 
+.accordion-section.open .accordion-section-title span.dashicons.dashicons-arrow-down,
 .nav-menus-php .metabox-holder .accordion-section.open .accordion-section-title span.dashicons.dashicons-arrow-down {
-	transform: rotate(180deg);
+	transform: rotate(180deg) translate(0, 50%);
 }
 
 #templateside ul li a {
@@ -3648,7 +3665,6 @@ img {
 
 .accordion-section-title {
 	margin: 0;
-	padding: 12px 15px 15px;
 	position: relative;
 	border-left: 1px solid #dcdcde;
 	border-right: 1px solid #dcdcde;
diff --git a/src/wp-admin/css/customize-controls.css b/src/wp-admin/css/customize-controls.css
index 1805790eb2..7e4eb52293 100644
--- a/src/wp-admin/css/customize-controls.css
+++ b/src/wp-admin/css/customize-controls.css
@@ -431,6 +431,7 @@ body.trashing #publish-settings {
 	border-right: none;
 	border-bottom: none;
 	cursor: default;
+	padding: 10px 10px 11px 14px;
 }
 
 #customize-controls .customize-info.open .accordion-section-title:after,
@@ -1727,7 +1728,7 @@ p.customize-section-description {
 	border-left: none;
 	border-right: none;
 	margin: 0 0 15px;
-	padding-right: 100px; /* Space for the button */
+	padding: 12px 100px 15px 15px; /* Space for the button */
 }
 
 #customize-theme-controls .control-section-themes .customize-themes-panel .accordion-section-title:first-child:hover, /* Not a focusable element. */