Improved: config dropdown structure (#4891)

* phtml and frss.css

* theme Origine

* theme adark

* theme Ansum

* theme Mapco

* theme BlueLagoon

* theme dark

* theme flat

* theme nord

* theme Screwdriver

* theme swage

* fix

* fix

* RTL

* fix nord theme

* fix SourceMap lines

27 files changed, 502 insertions, 184 deletions

diff --git a/p/themes/Alternative-Dark/adark.css b/p/themes/Alternative-Dark/adark.css
index 35480c31b..f32d91e53 100644
--- a/p/themes/Alternative-Dark/adark.css
+++ b/p/themes/Alternative-Dark/adark.css
@@ -341,7 +341,7 @@ a.btn {
 /*=== Dropdown */
 .dropdown-menu {
 	margin: 5px 0 0;
-	padding: 5px 0;
+	padding: 0.5rem 0 0.25rem 0;
 	background: var(--background-color-active);
 	font-size: 0.8rem;
 	border: 2px solid var(--background-color-light);
@@ -353,23 +353,35 @@ a.btn {
 	border-color: var(--border-color-dark);
 }
 
-.dropdown-header {
-	padding: 0 5px 5px;
+.dropdown-header,
+.dropdown-section .dropdown-section-title {
+	padding: 0.25rem 0.5rem 0.25rem 1rem;
 	color: var(--font-color-middle);
 	font-weight: bold;
 	text-align: left;
 }
 
-.dropdown-menu > .item > a,
-.dropdown-menu > .item > span,
-.dropdown-menu > .item > .as-link {
+.dropdown-menu .item > a,
+.dropdown-menu .item > span,
+.dropdown-menu .item > .as-link {
 	padding: 0 22px;
 	line-height: 2.5;
 	font-size: 0.8rem;
 }
 
-.dropdown-menu > .item > a:hover,
-.dropdown-menu > .item > button:hover {
+.dropdown-menu .dropdown-section .item > a,
+.dropdown-menu .dropdown-section .item > span,
+.dropdown-menu .dropdown-section .item > .as-link {
+	padding-left: 2rem;
+}
+
+.dropdown-menu .dropdown-section .item:last-child {
+	margin-bottom: 0.5rem;
+}
+
+.dropdown-menu .item > a:hover,
+.dropdown-menu .item > button:hover,
+.dropdown-menu .item > label:hover:not(.noHover) {
 	background: var(--background-color-hover);
 	color: var(--font-color-light);
 }
@@ -387,6 +399,7 @@ a.btn {
 }
 
 .item ~ .dropdown-header,
+.dropdown-section ~ .dropdown-section,
 .item.separator {
 	border-top-color: var(--border-color-dark);
 }
diff --git a/p/themes/Alternative-Dark/adark.rtl.css b/p/themes/Alternative-Dark/adark.rtl.css
index c01f77896..9cb07185d 100644
--- a/p/themes/Alternative-Dark/adark.rtl.css
+++ b/p/themes/Alternative-Dark/adark.rtl.css
@@ -341,7 +341,7 @@ a.btn {
 /*=== Dropdown */
 .dropdown-menu {
 	margin: 5px 0 0;
-	padding: 5px 0;
+	padding: 0.5rem 0 0.25rem 0;
 	background: var(--background-color-active);
 	font-size: 0.8rem;
 	border: 2px solid var(--background-color-light);
@@ -353,23 +353,35 @@ a.btn {
 	border-color: var(--border-color-dark);
 }
 
-.dropdown-header {
-	padding: 0 5px 5px;
+.dropdown-header,
+.dropdown-section .dropdown-section-title {
+	padding: 0.25rem 1rem 0.25rem 0.5rem;
 	color: var(--font-color-middle);
 	font-weight: bold;
 	text-align: right;
 }
 
-.dropdown-menu > .item > a,
-.dropdown-menu > .item > span,
-.dropdown-menu > .item > .as-link {
+.dropdown-menu .item > a,
+.dropdown-menu .item > span,
+.dropdown-menu .item > .as-link {
 	padding: 0 22px;
 	line-height: 2.5;
 	font-size: 0.8rem;
 }
 
-.dropdown-menu > .item > a:hover,
-.dropdown-menu > .item > button:hover {
+.dropdown-menu .dropdown-section .item > a,
+.dropdown-menu .dropdown-section .item > span,
+.dropdown-menu .dropdown-section .item > .as-link {
+	padding-right: 2rem;
+}
+
+.dropdown-menu .dropdown-section .item:last-child {
+	margin-bottom: 0.5rem;
+}
+
+.dropdown-menu .item > a:hover,
+.dropdown-menu .item > button:hover,
+.dropdown-menu .item > label:hover:not(.noHover) {
 	background: var(--background-color-hover);
 	color: var(--font-color-light);
 }
@@ -387,6 +399,7 @@ a.btn {
 }
 
 .item ~ .dropdown-header,
+.dropdown-section ~ .dropdown-section,
 .item.separator {
 	border-top-color: var(--border-color-dark);
 }
diff --git a/p/themes/Ansum/_components.scss b/p/themes/Ansum/_components.scss
index 35298b4de..001d31578 100644
--- a/p/themes/Ansum/_components.scss
+++ b/p/themes/Ansum/_components.scss
@@ -37,15 +37,14 @@
 		right: 17px;
 	}
 
-	.dropdown-header {
-		padding: 1rem 0.5rem 1rem 1rem;
+	.dropdown-header,
+	.dropdown-section .dropdown-section-title {
+		padding: 1rem 1.5rem;
 		font-weight: bold;
 		text-align: left;
 		color: variables.$grey-dark;
 		text-transform: uppercase;
 		letter-spacing: 1px;
-
-
 	}
 
 	.item {
@@ -57,19 +56,28 @@
 			color: variables.$main-font-color;
 			font-size: 1rem;
 			line-height: 2.5em;
+
+			&:not(.addItem):hover {
+				background: variables.$main-first;
+				color: variables.$white;
+
+				.icon {
+					filter: grayscale(100%) brightness(2.5);
+				}
+			}
 		}
 
-		&:not(.addItem):hover {
-			background: variables.$main-first;
-			color: variables.$white;
+		&.dropdown-section {
+			margin-top: 0.75rem;
 
-			a, button, label {
-				text-decoration: none;
-				color: variables.$white;
+			~ .dropdown-section {
+				border-top-color: variables.$grey-light;
 			}
 
-			.icon {
-				filter: grayscale(100%) brightness(2.5);
+			.item {
+				a, span, .as-link {
+					padding-left: 2rem;
+				}
 			}
 		}
 
diff --git a/p/themes/Ansum/ansum.css b/p/themes/Ansum/ansum.css
index 07586f8fb..f07ba86ad 100644
--- a/p/themes/Ansum/ansum.css
+++ b/p/themes/Ansum/ansum.css
@@ -240,8 +240,9 @@ form th {
 	border: none;
 	right: 17px;
 }
-.dropdown-menu .dropdown-header {
-	padding: 1rem 0.5rem 1rem 1rem;
+.dropdown-menu .dropdown-header,
+.dropdown-menu .dropdown-section .dropdown-section-title {
+	padding: 1rem 1.5rem;
 	font-weight: bold;
 	text-align: left;
 	color: #766556;
@@ -257,17 +258,22 @@ form th {
 	font-size: 1rem;
 	line-height: 2.5em;
 }
-.dropdown-menu .item:not(.addItem):hover {
+.dropdown-menu .item a:not(.addItem):hover, .dropdown-menu .item span:not(.addItem):hover, .dropdown-menu .item .as-link:not(.addItem):hover {
 	background: #ca7227;
 	color: #fff;
 }
-.dropdown-menu .item:not(.addItem):hover a, .dropdown-menu .item:not(.addItem):hover button, .dropdown-menu .item:not(.addItem):hover label {
-	text-decoration: none;
-	color: #fff;
-}
-.dropdown-menu .item:not(.addItem):hover .icon {
+.dropdown-menu .item a:not(.addItem):hover .icon, .dropdown-menu .item span:not(.addItem):hover .icon, .dropdown-menu .item .as-link:not(.addItem):hover .icon {
 	filter: grayscale(100%) brightness(2.5);
 }
+.dropdown-menu .item.dropdown-section {
+	margin-top: 0.75rem;
+}
+.dropdown-menu .item.dropdown-section ~ .dropdown-section {
+	border-top-color: #f5f0ec;
+}
+.dropdown-menu .item.dropdown-section .item a, .dropdown-menu .item.dropdown-section .item span, .dropdown-menu .item.dropdown-section .item .as-link {
+	padding-left: 2rem;
+}
 .dropdown-menu .item:not(.addItem) a:hover,
 .dropdown-menu .item:not(.addItem) button:hover {
 	background: #ca7227;
diff --git a/p/themes/Ansum/ansum.rtl.css b/p/themes/Ansum/ansum.rtl.css
index 7ab296aa5..beb5de8a8 100644
--- a/p/themes/Ansum/ansum.rtl.css
+++ b/p/themes/Ansum/ansum.rtl.css
@@ -240,8 +240,9 @@ form th {
 	border: none;
 	left: 17px;
 }
-.dropdown-menu .dropdown-header {
-	padding: 1rem 1rem 1rem 0.5rem;
+.dropdown-menu .dropdown-header,
+.dropdown-menu .dropdown-section .dropdown-section-title {
+	padding: 1rem 1.5rem;
 	font-weight: bold;
 	text-align: right;
 	color: #766556;
@@ -257,17 +258,22 @@ form th {
 	font-size: 1rem;
 	line-height: 2.5em;
 }
-.dropdown-menu .item:not(.addItem):hover {
+.dropdown-menu .item a:not(.addItem):hover, .dropdown-menu .item span:not(.addItem):hover, .dropdown-menu .item .as-link:not(.addItem):hover {
 	background: #ca7227;
 	color: #fff;
 }
-.dropdown-menu .item:not(.addItem):hover a, .dropdown-menu .item:not(.addItem):hover button, .dropdown-menu .item:not(.addItem):hover label {
-	text-decoration: none;
-	color: #fff;
-}
-.dropdown-menu .item:not(.addItem):hover .icon {
+.dropdown-menu .item a:not(.addItem):hover .icon, .dropdown-menu .item span:not(.addItem):hover .icon, .dropdown-menu .item .as-link:not(.addItem):hover .icon {
 	filter: grayscale(100%) brightness(2.5);
 }
+.dropdown-menu .item.dropdown-section {
+	margin-top: 0.75rem;
+}
+.dropdown-menu .item.dropdown-section ~ .dropdown-section {
+	border-top-color: #f5f0ec;
+}
+.dropdown-menu .item.dropdown-section .item a, .dropdown-menu .item.dropdown-section .item span, .dropdown-menu .item.dropdown-section .item .as-link {
+	padding-right: 2rem;
+}
 .dropdown-menu .item:not(.addItem) a:hover,
 .dropdown-menu .item:not(.addItem) button:hover {
 	background: #ca7227;
diff --git a/p/themes/BlueLagoon/BlueLagoon.css b/p/themes/BlueLagoon/BlueLagoon.css
index 56e43bf04..276b50c8a 100644
--- a/p/themes/BlueLagoon/BlueLagoon.css
+++ b/p/themes/BlueLagoon/BlueLagoon.css
@@ -350,7 +350,8 @@ a.btn {
 	transform: rotate(45deg);
 }
 
-.dropdown-header {
+.dropdown-header,
+.dropdown-section .dropdown-section-title {
 	padding: 0 5px 5px;
 	color: #ccc;
 	font-weight: bold;
@@ -360,9 +361,9 @@ a.btn {
 	filter: grayscale(100%) brightness(2.5);
 }
 
-.dropdown-menu > .item > a,
-.dropdown-menu > .item > span,
-.dropdown-menu > .item > .as-link {
+.dropdown-menu .item > a,
+.dropdown-menu .item > span,
+.dropdown-menu .item > .as-link {
 	padding: 0 22px;
 	line-height: 2.5em;
 	color: #ccc;
@@ -373,8 +374,19 @@ a.btn {
 	color: #ccc;
 }
 
-.dropdown-menu > .item > a:hover,
-.dropdown-menu > .item > button:hover {
+.dropdown-menu .dropdown-section .item > a,
+.dropdown-menu .dropdown-section .item > span,
+.dropdown-menu .dropdown-section .item > .as-link {
+	padding-left: 2rem;
+}
+
+.dropdown-menu .dropdown-section .item:last-child {
+	margin-bottom: 0.5rem;
+}
+
+.dropdown-menu .item > a:hover,
+.dropdown-menu .item > button:hover,
+.dropdown-menu .item > label:hover:not(.noHover) {
 	background: linear-gradient(180deg,  #0090ff 0%, #0062be 100%) #e4992c;
 	background: -webkit-linear-gradient(top,  #0090ff 0%, #0062be 100%);
 	color: #fff;
diff --git a/p/themes/BlueLagoon/BlueLagoon.rtl.css b/p/themes/BlueLagoon/BlueLagoon.rtl.css
index 035898fa9..1713a89ed 100644
--- a/p/themes/BlueLagoon/BlueLagoon.rtl.css
+++ b/p/themes/BlueLagoon/BlueLagoon.rtl.css
@@ -350,7 +350,8 @@ a.btn {
 	transform: rotate(-45deg);
 }
 
-.dropdown-header {
+.dropdown-header,
+.dropdown-section .dropdown-section-title {
 	padding: 0 5px 5px;
 	color: #ccc;
 	font-weight: bold;
@@ -360,9 +361,9 @@ a.btn {
 	filter: grayscale(100%) brightness(2.5);
 }
 
-.dropdown-menu > .item > a,
-.dropdown-menu > .item > span,
-.dropdown-menu > .item > .as-link {
+.dropdown-menu .item > a,
+.dropdown-menu .item > span,
+.dropdown-menu .item > .as-link {
 	padding: 0 22px;
 	line-height: 2.5em;
 	color: #ccc;
@@ -373,8 +374,19 @@ a.btn {
 	color: #ccc;
 }
 
-.dropdown-menu > .item > a:hover,
-.dropdown-menu > .item > button:hover {
+.dropdown-menu .dropdown-section .item > a,
+.dropdown-menu .dropdown-section .item > span,
+.dropdown-menu .dropdown-section .item > .as-link {
+	padding-right: 2rem;
+}
+
+.dropdown-menu .dropdown-section .item:last-child {
+	margin-bottom: 0.5rem;
+}
+
+.dropdown-menu .item > a:hover,
+.dropdown-menu .item > button:hover,
+.dropdown-menu .item > label:hover:not(.noHover) {
 	background: linear-gradient(-180deg,  #0090ff 0%, #0062be 100%) #e4992c;
 	background: -webkit-linear-gradient(top,  #0090ff 0%, #0062be 100%);
 	color: #fff;
diff --git a/p/themes/Dark/dark.css b/p/themes/Dark/dark.css
index a4aed0c2d..4a13c4099 100644
--- a/p/themes/Dark/dark.css
+++ b/p/themes/Dark/dark.css
@@ -336,23 +336,35 @@ a.btn {
 	border-color: #888;
 }
 
-.dropdown-header {
-	padding: 0 5px 5px;
+.dropdown-header,
+.dropdown-section .dropdown-section-title {
+	padding: 0.25rem 0.5rem 0.25rem 1rem;
 	font-weight: bold;
 	text-align: left;
 	color: #888;
 }
 
-.dropdown-menu > .item > a,
-.dropdown-menu > .item > span,
-.dropdown-menu > .item > .as-link {
+.dropdown-menu .item > a,
+.dropdown-menu .item > span,
+.dropdown-menu .item > .as-link {
 	padding: 0 22px;
 	line-height: 2.5em;
 	font-size: 0.8rem;
 }
 
-.dropdown-menu > .item > a:hover,
-.dropdown-menu > .item > button:hover {
+.dropdown-menu .dropdown-section .item > a,
+.dropdown-menu .dropdown-section .item > span,
+.dropdown-menu .dropdown-section .item > .as-link {
+	padding-left: 2rem;
+}
+
+.dropdown-menu .dropdown-section .item:last-child {
+	margin-bottom: 0.5rem;
+}
+
+.dropdown-menu .item > a:hover,
+.dropdown-menu .item > button:hover,
+.dropdown-menu .item > label:hover:not(.noHover) {
 	background: #26303f;
 	color: #888;
 }
@@ -370,6 +382,7 @@ a.btn {
 }
 
 .item ~ .dropdown-header,
+.dropdown-section ~ .dropdown-section,
 .item.separator {
 	border-top-color: #333;
 }
diff --git a/p/themes/Dark/dark.rtl.css b/p/themes/Dark/dark.rtl.css
index 4736e069f..82f30827e 100644
--- a/p/themes/Dark/dark.rtl.css
+++ b/p/themes/Dark/dark.rtl.css
@@ -336,23 +336,35 @@ a.btn {
 	border-color: #888;
 }
 
-.dropdown-header {
-	padding: 0 5px 5px;
+.dropdown-header,
+.dropdown-section .dropdown-section-title {
+	padding: 0.25rem 1rem 0.25rem 0.5rem;
 	font-weight: bold;
 	text-align: right;
 	color: #888;
 }
 
-.dropdown-menu > .item > a,
-.dropdown-menu > .item > span,
-.dropdown-menu > .item > .as-link {
+.dropdown-menu .item > a,
+.dropdown-menu .item > span,
+.dropdown-menu .item > .as-link {
 	padding: 0 22px;
 	line-height: 2.5em;
 	font-size: 0.8rem;
 }
 
-.dropdown-menu > .item > a:hover,
-.dropdown-menu > .item > button:hover {
+.dropdown-menu .dropdown-section .item > a,
+.dropdown-menu .dropdown-section .item > span,
+.dropdown-menu .dropdown-section .item > .as-link {
+	padding-right: 2rem;
+}
+
+.dropdown-menu .dropdown-section .item:last-child {
+	margin-bottom: 0.5rem;
+}
+
+.dropdown-menu .item > a:hover,
+.dropdown-menu .item > button:hover,
+.dropdown-menu .item > label:hover:not(.noHover) {
 	background: #26303f;
 	color: #888;
 }
@@ -370,6 +382,7 @@ a.btn {
 }
 
 .item ~ .dropdown-header,
+.dropdown-section ~ .dropdown-section,
 .item.separator {
 	border-top-color: #333;
 }
diff --git a/p/themes/Flat/flat.css b/p/themes/Flat/flat.css
index 5bdc1779a..67d823cac 100644
--- a/p/themes/Flat/flat.css
+++ b/p/themes/Flat/flat.css
@@ -311,7 +311,7 @@ a.btn {
 /*=== Dropdown */
 .dropdown-menu {
 	margin: 0.5rem 0 0;
-	padding: 0.5rem 0;
+	padding: 0.5rem 0 0.25rem 0;
 	background: #fafafa;
 	font-size: 0.8rem;
 	border: 1px solid #95a5a6;
@@ -324,7 +324,8 @@ a.btn {
 	right: 12px;
 }
 
-.dropdown-header {
+.dropdown-header,
+.dropdown-section .dropdown-section-title {
 	padding: 0 0.5rem 0.5rem;
 	font-weight: bold;
 	text-align: left;
@@ -336,16 +337,27 @@ a.btn {
 	right: 0.5rem;
 }
 
-.dropdown-menu > .item > a,
-.dropdown-menu > .item > span,
-.dropdown-menu > .item > .as-link {
+.dropdown-menu .item > a,
+.dropdown-menu .item > span,
+.dropdown-menu .item > .as-link {
 	padding: 0 22px;
 	line-height: 2.5em;
 	font-size: 0.8rem;
 }
 
-.dropdown-menu > .item > a:hover,
-.dropdown-menu > .item > button:hover {
+.dropdown-menu .dropdown-section .item > a,
+.dropdown-menu .dropdown-section .item > span,
+.dropdown-menu .dropdown-section .item > .as-link {
+	padding-left: 2rem;
+}
+
+.dropdown-menu .dropdown-section .item:last-child {
+	margin-bottom: 0.5rem;
+}
+
+.dropdown-menu .item > a:hover,
+.dropdown-menu .item > button:hover,
+.dropdown-menu .item > label:hover:not(.noHover) {
 	background: #2980b9;
 	color: #fff;
 }
@@ -368,6 +380,7 @@ a.btn {
 }
 
 .item ~ .dropdown-header,
+.dropdown-section ~ .dropdown-section,
 .item.separator {
 	border-top-color: #ddd;
 }
diff --git a/p/themes/Flat/flat.rtl.css b/p/themes/Flat/flat.rtl.css
index b6c95b7a6..dbbb9a6aa 100644
--- a/p/themes/Flat/flat.rtl.css
+++ b/p/themes/Flat/flat.rtl.css
@@ -311,7 +311,7 @@ a.btn {
 /*=== Dropdown */
 .dropdown-menu {
 	margin: 0.5rem 0 0;
-	padding: 0.5rem 0;
+	padding: 0.5rem 0 0.25rem 0;
 	background: #fafafa;
 	font-size: 0.8rem;
 	border: 1px solid #95a5a6;
@@ -324,7 +324,8 @@ a.btn {
 	left: 12px;
 }
 
-.dropdown-header {
+.dropdown-header,
+.dropdown-section .dropdown-section-title {
 	padding: 0 0.5rem 0.5rem;
 	font-weight: bold;
 	text-align: right;
@@ -336,16 +337,27 @@ a.btn {
 	left: 0.5rem;
 }
 
-.dropdown-menu > .item > a,
-.dropdown-menu > .item > span,
-.dropdown-menu > .item > .as-link {
+.dropdown-menu .item > a,
+.dropdown-menu .item > span,
+.dropdown-menu .item > .as-link {
 	padding: 0 22px;
 	line-height: 2.5em;
 	font-size: 0.8rem;
 }
 
-.dropdown-menu > .item > a:hover,
-.dropdown-menu > .item > button:hover {
+.dropdown-menu .dropdown-section .item > a,
+.dropdown-menu .dropdown-section .item > span,
+.dropdown-menu .dropdown-section .item > .as-link {
+	padding-right: 2rem;
+}
+
+.dropdown-menu .dropdown-section .item:last-child {
+	margin-bottom: 0.5rem;
+}
+
+.dropdown-menu .item > a:hover,
+.dropdown-menu .item > button:hover,
+.dropdown-menu .item > label:hover:not(.noHover) {
 	background: #2980b9;
 	color: #fff;
 }
@@ -368,6 +380,7 @@ a.btn {
 }
 
 .item ~ .dropdown-header,
+.dropdown-section ~ .dropdown-section,
 .item.separator {
 	border-top-color: #ddd;
 }
diff --git a/p/themes/Mapco/_components.scss b/p/themes/Mapco/_components.scss
index cf7aca73d..55542f2e7 100644
--- a/p/themes/Mapco/_components.scss
+++ b/p/themes/Mapco/_components.scss
@@ -37,8 +37,9 @@
 		right: 18px;
 	}
 
-	.dropdown-header {
-		padding: 1rem 0.5rem 1rem 1rem;
+	.dropdown-header,
+	.dropdown-section .dropdown-section-title {
+		padding: 1rem 1.5rem;
 		font-weight: bold;
 		text-align: left;
 		color: variables.$grey-dark;
@@ -55,11 +56,8 @@
 			color: variables.$main-font-color;
 			font-size: 1rem;
 			line-height: 2.5em;
-		}
 
-		&:not(.addItem) {
-			a:hover,
-			button:hover {
+			&:not(.addItem):hover {
 				background: variables.$main-first;
 				color: variables.$white;
 
@@ -69,6 +67,20 @@
 			}
 		}
 
+		&.dropdown-section {
+			margin-top: 0.75rem;
+
+			~ .dropdown-section {
+				border-top-color: variables.$grey-light;
+			}
+
+			.item {
+				a, span, .as-link {
+					padding-left: 2rem;
+				}
+			}
+		}
+
 		&[aria-checked="true"] {
 			a::before {
 				margin: 0 0 0 -14px;
diff --git a/p/themes/Mapco/mapco.css b/p/themes/Mapco/mapco.css
index 7d014cb0b..170938509 100644
--- a/p/themes/Mapco/mapco.css
+++ b/p/themes/Mapco/mapco.css
@@ -239,8 +239,9 @@ form th {
 	border: none;
 	right: 18px;
 }
-.dropdown-menu .dropdown-header {
-	padding: 1rem 0.5rem 1rem 1rem;
+.dropdown-menu .dropdown-header,
+.dropdown-menu .dropdown-section .dropdown-section-title {
+	padding: 1rem 1.5rem;
 	font-weight: bold;
 	text-align: left;
 	color: #5b6871;
@@ -256,15 +257,22 @@ form th {
 	font-size: 1rem;
 	line-height: 2.5em;
 }
-.dropdown-menu .item:not(.addItem) a:hover,
-.dropdown-menu .item:not(.addItem) button:hover {
+.dropdown-menu .item a:not(.addItem):hover, .dropdown-menu .item span:not(.addItem):hover, .dropdown-menu .item .as-link:not(.addItem):hover {
 	background: #36c;
 	color: #fff;
 }
-.dropdown-menu .item:not(.addItem) a:hover .icon,
-.dropdown-menu .item:not(.addItem) button:hover .icon {
+.dropdown-menu .item a:not(.addItem):hover .icon, .dropdown-menu .item span:not(.addItem):hover .icon, .dropdown-menu .item .as-link:not(.addItem):hover .icon {
 	filter: brightness(3);
 }
+.dropdown-menu .item.dropdown-section {
+	margin-top: 0.75rem;
+}
+.dropdown-menu .item.dropdown-section ~ .dropdown-section {
+	border-top-color: #eff0f2;
+}
+.dropdown-menu .item.dropdown-section .item a, .dropdown-menu .item.dropdown-section .item span, .dropdown-menu .item.dropdown-section .item .as-link {
+	padding-left: 2rem;
+}
 .dropdown-menu .item[aria-checked=true] a::before {
 	margin: 0 0 0 -14px;
 	font-weight: bold;
diff --git a/p/themes/Mapco/mapco.rtl.css b/p/themes/Mapco/mapco.rtl.css
index 4c5cc5944..c2096b11c 100644
--- a/p/themes/Mapco/mapco.rtl.css
+++ b/p/themes/Mapco/mapco.rtl.css
@@ -239,8 +239,9 @@ form th {
 	border: none;
 	left: 18px;
 }
-.dropdown-menu .dropdown-header {
-	padding: 1rem 1rem 1rem 0.5rem;
+.dropdown-menu .dropdown-header,
+.dropdown-menu .dropdown-section .dropdown-section-title {
+	padding: 1rem 1.5rem;
 	font-weight: bold;
 	text-align: right;
 	color: #5b6871;
@@ -256,15 +257,22 @@ form th {
 	font-size: 1rem;
 	line-height: 2.5em;
 }
-.dropdown-menu .item:not(.addItem) a:hover,
-.dropdown-menu .item:not(.addItem) button:hover {
+.dropdown-menu .item a:not(.addItem):hover, .dropdown-menu .item span:not(.addItem):hover, .dropdown-menu .item .as-link:not(.addItem):hover {
 	background: #36c;
 	color: #fff;
 }
-.dropdown-menu .item:not(.addItem) a:hover .icon,
-.dropdown-menu .item:not(.addItem) button:hover .icon {
+.dropdown-menu .item a:not(.addItem):hover .icon, .dropdown-menu .item span:not(.addItem):hover .icon, .dropdown-menu .item .as-link:not(.addItem):hover .icon {
 	filter: brightness(3);
 }
+.dropdown-menu .item.dropdown-section {
+	margin-top: 0.75rem;
+}
+.dropdown-menu .item.dropdown-section ~ .dropdown-section {
+	border-top-color: #eff0f2;
+}
+.dropdown-menu .item.dropdown-section .item a, .dropdown-menu .item.dropdown-section .item span, .dropdown-menu .item.dropdown-section .item .as-link {
+	padding-right: 2rem;
+}
 .dropdown-menu .item[aria-checked=true] a::before {
 	margin: 0 -14px 0 0;
 	font-weight: bold;
diff --git a/p/themes/Nord/nord.css b/p/themes/Nord/nord.css
index 3a6fc12af..8ce9727a3 100644
--- a/p/themes/Nord/nord.css
+++ b/p/themes/Nord/nord.css
@@ -198,7 +198,7 @@ a.btn {
 
 .dropdown-menu {
 	margin: 5px 0 0;
-	padding: 5px 0;
+	padding: 0.5rem 0 0.25rem 0;
 	background: var(--accent-bg);
 	font-size: 0.8rem;
 	border: 1px solid var(--border);
@@ -206,21 +206,38 @@ a.btn {
 	text-align: left;
 }
 
-.dropdown-header {
+.dropdown-header,
+.dropdown-section .dropdown-section-title {
 	padding: 0 5px 5px;
 	font-weight: bold;
 	text-align: left;
 }
 
-.dropdown-menu > .item > a,
-.dropdown-menu > .item > span,
-.dropdown-menu > .item > .as-link {
+.dropdown-menu .item > a,
+.dropdown-menu .item > span,
+.dropdown-menu .item > .as-link {
 	padding: 0 22px;
 	color: var(--text);
 	line-height: 2.5em;
 	min-width: 200px;
 }
 
+.dropdown-menu .dropdown-section .item > a,
+.dropdown-menu .dropdown-section .item > span,
+.dropdown-menu .dropdown-section .item > .as-link {
+	padding-left: 2rem;
+}
+
+.dropdown-menu .dropdown-section .item:last-child {
+	margin-bottom: 0.5rem;
+}
+
+.dropdown-menu .item > a:hover,
+.dropdown-menu .item > button:hover,
+.dropdown-menu .item > label:hover:not(.noHover) {
+	/* no hover color */
+}
+
 .dropdown-menu > .item[aria-checked="true"] > a::before {
 	font-weight: bold;
 	margin: 0 0 0 -14px;
@@ -276,6 +293,7 @@ a.btn {
 }
 
 .item ~ .dropdown-header,
+.dropdown-section ~ .dropdown-section,
 .item.separator {
 	border-top-color: var(--border);
 }
diff --git a/p/themes/Nord/nord.rtl.css b/p/themes/Nord/nord.rtl.css
index e3b3a7d78..f7b0c4a64 100644
--- a/p/themes/Nord/nord.rtl.css
+++ b/p/themes/Nord/nord.rtl.css
@@ -198,7 +198,7 @@ a.btn {
 
 .dropdown-menu {
 	margin: 5px 0 0;
-	padding: 5px 0;
+	padding: 0.5rem 0 0.25rem 0;
 	background: var(--accent-bg);
 	font-size: 0.8rem;
 	border: 1px solid var(--border);
@@ -206,21 +206,38 @@ a.btn {
 	text-align: right;
 }
 
-.dropdown-header {
+.dropdown-header,
+.dropdown-section .dropdown-section-title {
 	padding: 0 5px 5px;
 	font-weight: bold;
 	text-align: right;
 }
 
-.dropdown-menu > .item > a,
-.dropdown-menu > .item > span,
-.dropdown-menu > .item > .as-link {
+.dropdown-menu .item > a,
+.dropdown-menu .item > span,
+.dropdown-menu .item > .as-link {
 	padding: 0 22px;
 	color: var(--text);
 	line-height: 2.5em;
 	min-width: 200px;
 }
 
+.dropdown-menu .dropdown-section .item > a,
+.dropdown-menu .dropdown-section .item > span,
+.dropdown-menu .dropdown-section .item > .as-link {
+	padding-right: 2rem;
+}
+
+.dropdown-menu .dropdown-section .item:last-child {
+	margin-bottom: 0.5rem;
+}
+
+.dropdown-menu .item > a:hover,
+.dropdown-menu .item > button:hover,
+.dropdown-menu .item > label:hover:not(.noHover) {
+	/* no hover color */
+}
+
 .dropdown-menu > .item[aria-checked="true"] > a::before {
 	font-weight: bold;
 	margin: 0 -14px 0 0;
@@ -276,6 +293,7 @@ a.btn {
 }
 
 .item ~ .dropdown-header,
+.dropdown-section ~ .dropdown-section,
 .item.separator {
 	border-top-color: var(--border);
 }
diff --git a/p/themes/Origine/origine.css b/p/themes/Origine/origine.css
index b8bf4c5ab..457a25ecc 100644
--- a/p/themes/Origine/origine.css
+++ b/p/themes/Origine/origine.css
@@ -436,33 +436,45 @@ a:hover .icon {
 	border-color: var(--border-color);
 }
 
-.dropdown-header {
-	padding: 0 5px 5px;
+.dropdown-header,
+.dropdown-section .dropdown-section-title {
+	padding: 0.25rem 0.5rem 0.25rem 1rem;
 	color: var(--font-color-grey);
 	font-weight: bold;
 	text-align: left;
 }
 
-.dropdown-menu > .item > a,
-.dropdown-menu > .item > span,
-.dropdown-menu > .item > .as-link {
+.dropdown-menu .item > a,
+.dropdown-menu .item > span,
+.dropdown-menu .item > .as-link {
 	padding: 0 22px;
 	line-height: 2.5;
 	font-size: 0.8rem;
 }
 
-.dropdown-menu > .item > a:hover,
-.dropdown-menu > .item > button:hover,
-.dropdown-menu > .item > label:hover:not(.noHover) {
+.dropdown-menu .dropdown-section .item > a,
+.dropdown-menu .dropdown-section .item > span,
+.dropdown-menu .dropdown-section .item > .as-link {
+	padding-left: 2rem;
+}
+
+.dropdown-menu .dropdown-section .item:last-child {
+	margin-bottom: 0.5rem;
+}
+
+.dropdown-menu .item > a:hover,
+.dropdown-menu .item > button:hover,
+.dropdown-menu .item > label:hover:not(.noHover) {
 	background-color: var(--contrast-background-color-active);
 	color: var(--font-color-light);
 }
 
-.dropdown-menu > .item > label {
+.dropdown-menu .item > label {
 	padding: 0;
 }
 
-.dropdown-menu > .item:hover .icon {
+.dropdown-menu > .item:hover > a > .icon,
+.dropdown-menu .item.dropdown-section .item:hover .icon {
 	filter: grayscale(100%) brightness(2.5);
 }
 
@@ -479,6 +491,7 @@ a:hover .icon {
 }
 
 .item ~ .dropdown-header,
+.dropdown-section ~ .dropdown-section,
 .item.separator {
 	border-top-color: var(--border-color);
 }
@@ -1164,6 +1177,10 @@ a:hover .icon {
 		border-left: 1px solid var(--border-color);
 	}
 
+	.dropdown-menu .dropdown-section:last-child {
+		margin-bottom: 3rem;
+	}
+
 	.form-group.form-actions {
 		margin-left: -15px;
 		margin-right: -15px;
diff --git a/p/themes/Origine/origine.rtl.css b/p/themes/Origine/origine.rtl.css
index 2a85b77ad..72cf63969 100644
--- a/p/themes/Origine/origine.rtl.css
+++ b/p/themes/Origine/origine.rtl.css
@@ -436,33 +436,45 @@ a:hover .icon {
 	border-color: var(--border-color);
 }
 
-.dropdown-header {
-	padding: 0 5px 5px;
+.dropdown-header,
+.dropdown-section .dropdown-section-title {
+	padding: 0.25rem 1rem 0.25rem 0.5rem;
 	color: var(--font-color-grey);
 	font-weight: bold;
 	text-align: right;
 }
 
-.dropdown-menu > .item > a,
-.dropdown-menu > .item > span,
-.dropdown-menu > .item > .as-link {
+.dropdown-menu .item > a,
+.dropdown-menu .item > span,
+.dropdown-menu .item > .as-link {
 	padding: 0 22px;
 	line-height: 2.5;
 	font-size: 0.8rem;
 }
 
-.dropdown-menu > .item > a:hover,
-.dropdown-menu > .item > button:hover,
-.dropdown-menu > .item > label:hover:not(.noHover) {
+.dropdown-menu .dropdown-section .item > a,
+.dropdown-menu .dropdown-section .item > span,
+.dropdown-menu .dropdown-section .item > .as-link {
+	padding-right: 2rem;
+}
+
+.dropdown-menu .dropdown-section .item:last-child {
+	margin-bottom: 0.5rem;
+}
+
+.dropdown-menu .item > a:hover,
+.dropdown-menu .item > button:hover,
+.dropdown-menu .item > label:hover:not(.noHover) {
 	background-color: var(--contrast-background-color-active);
 	color: var(--font-color-light);
 }
 
-.dropdown-menu > .item > label {
+.dropdown-menu .item > label {
 	padding: 0;
 }
 
-.dropdown-menu > .item:hover .icon {
+.dropdown-menu > .item:hover > a > .icon,
+.dropdown-menu .item.dropdown-section .item:hover .icon {
 	filter: grayscale(100%) brightness(2.5);
 }
 
@@ -479,6 +491,7 @@ a:hover .icon {
 }
 
 .item ~ .dropdown-header,
+.dropdown-section ~ .dropdown-section,
 .item.separator {
 	border-top-color: var(--border-color);
 }
@@ -1164,6 +1177,10 @@ a:hover .icon {
 		border-right: 1px solid var(--border-color);
 	}
 
+	.dropdown-menu .dropdown-section:last-child {
+		margin-bottom: 3rem;
+	}
+
 	.form-group.form-actions {
 		margin-right: -15px;
 		margin-left: -15px;
diff --git a/p/themes/Pafat/pafat.css b/p/themes/Pafat/pafat.css
index f390a1c1c..d64521573 100644
--- a/p/themes/Pafat/pafat.css
+++ b/p/themes/Pafat/pafat.css
@@ -283,7 +283,7 @@ a.btn {
 /*=== Dropdown */
 .dropdown-menu {
 	margin: 5px 0 0;
-	padding: 5px 0;
+	padding: 0.5rem 0 0.25rem 0;
 	font-size: 0.8rem;
 	border: 1px solid #aaa;
 	border-radius: 5px;
@@ -295,24 +295,36 @@ a.btn {
 	right: 8px;
 }
 
-.dropdown-header {
+.dropdown-header,
+.dropdown-section .dropdown-section-title {
 	padding: 0 5px 5px;
 	color: #888;
 	font-weight: bold;
 	text-align: left;
 }
 
-.dropdown-menu > .item > a,
-.dropdown-menu > .item > span,
-.dropdown-menu > .item > .as-link {
+.dropdown-menu .item > a,
+.dropdown-menu .item > span,
+.dropdown-menu .item > .as-link {
 	padding: 0 22px;
 	line-height: 2.5;
 	color: #666;
 	font-size: 0.8rem;
 }
 
-.dropdown-menu > .item > a:hover,
-.dropdown-menu > .item > button:hover {
+.dropdown-menu .dropdown-section .item > a,
+.dropdown-menu .dropdown-section .item > span,
+.dropdown-menu .dropdown-section .item > .as-link {
+	padding-left: 2rem;
+}
+
+.dropdown-menu .dropdown-section .item:last-child {
+	margin-bottom: 0.5rem;
+}
+
+.dropdown-menu .item > a:hover,
+.dropdown-menu .item > button:hover,
+.dropdown-menu .item > label:hover:not(.noHover) {
 	background: #eee;
 	color: #666;
 }
@@ -330,6 +342,7 @@ a.btn {
 }
 
 .item ~ .dropdown-header,
+.dropdown-section ~ .dropdown-section,
 .item.separator {
 	border-top-color: #ddd;
 }
diff --git a/p/themes/Pafat/pafat.rtl.css b/p/themes/Pafat/pafat.rtl.css
index 20c204cb9..55e255369 100644
--- a/p/themes/Pafat/pafat.rtl.css
+++ b/p/themes/Pafat/pafat.rtl.css
@@ -283,7 +283,7 @@ a.btn {
 /*=== Dropdown */
 .dropdown-menu {
 	margin: 5px 0 0;
-	padding: 5px 0;
+	padding: 0.5rem 0 0.25rem 0;
 	font-size: 0.8rem;
 	border: 1px solid #aaa;
 	border-radius: 5px;
@@ -295,24 +295,36 @@ a.btn {
 	left: 8px;
 }
 
-.dropdown-header {
+.dropdown-header,
+.dropdown-section .dropdown-section-title {
 	padding: 0 5px 5px;
 	color: #888;
 	font-weight: bold;
 	text-align: right;
 }
 
-.dropdown-menu > .item > a,
-.dropdown-menu > .item > span,
-.dropdown-menu > .item > .as-link {
+.dropdown-menu .item > a,
+.dropdown-menu .item > span,
+.dropdown-menu .item > .as-link {
 	padding: 0 22px;
 	line-height: 2.5;
 	color: #666;
 	font-size: 0.8rem;
 }
 
-.dropdown-menu > .item > a:hover,
-.dropdown-menu > .item > button:hover {
+.dropdown-menu .dropdown-section .item > a,
+.dropdown-menu .dropdown-section .item > span,
+.dropdown-menu .dropdown-section .item > .as-link {
+	padding-right: 2rem;
+}
+
+.dropdown-menu .dropdown-section .item:last-child {
+	margin-bottom: 0.5rem;
+}
+
+.dropdown-menu .item > a:hover,
+.dropdown-menu .item > button:hover,
+.dropdown-menu .item > label:hover:not(.noHover) {
 	background: #eee;
 	color: #666;
 }
@@ -330,6 +342,7 @@ a.btn {
 }
 
 .item ~ .dropdown-header,
+.dropdown-section ~ .dropdown-section,
 .item.separator {
 	border-top-color: #ddd;
 }
diff --git a/p/themes/Screwdriver/screwdriver.css b/p/themes/Screwdriver/screwdriver.css
index eddbdd136..490381fb6 100644
--- a/p/themes/Screwdriver/screwdriver.css
+++ b/p/themes/Screwdriver/screwdriver.css
@@ -331,7 +331,7 @@ a.btn {
 /*=== Dropdown */
 .dropdown-menu {
 	margin: 5px 0 0;
-	padding: 5px 0;
+	padding: 0.5rem 0 0.25rem 0;
 	background: #222;
 	font-size: 0.8rem;
 	border: 1px solid #171717;
@@ -344,30 +344,43 @@ a.btn {
 	border-color: #171717;
 }
 
-.dropdown-header {
+.dropdown-header,
+.dropdown-section .dropdown-section-title {
 	padding: 0 5px 5px;
 	color: #ccc;
 	font-weight: bold;
 }
 
-.dropdown-menu > .item > a,
-.dropdown-menu > .item > span,
-.dropdown-menu > .item > .as-link {
+.dropdown-menu .item > a,
+.dropdown-menu .item > span,
+.dropdown-menu .item > .as-link {
 	padding: 0 22px;
 	line-height: 2.5em;
 	color: #ccc;
 	font-size: 0.8rem;
 }
 
-.dropdown-menu > .item > label {
-	color: #ccc;
+.dropdown-menu .dropdown-section .item > a,
+.dropdown-menu .dropdown-section .item > span,
+.dropdown-menu .dropdown-section .item > .as-link {
+	padding-left: 2rem;
+}
+
+.dropdown-menu .dropdown-section .item:last-child {
+	margin-bottom: 0.5rem;
 }
 
-.dropdown-menu > .item:hover {
+.dropdown-menu .item > a:hover,
+.dropdown-menu .item > button:hover,
+.dropdown-menu .item > label:hover:not(.noHover) {
 	background: #171717;
 	color: #fff;
 }
 
+.dropdown-menu > .item > label {
+	color: #ccc;
+}
+
 .dropdown-menu > .item[aria-checked="true"] > a::before {
 	font-weight: bold;
 	margin: 0 0 0 -14px;
@@ -379,6 +392,7 @@ a.btn {
 }
 
 .item ~ .dropdown-header,
+.dropdown-section ~ .dropdown-section,
 .item.separator {
 	border-top-color: rgba(255,255,255,0.08);
 }
diff --git a/p/themes/Screwdriver/screwdriver.rtl.css b/p/themes/Screwdriver/screwdriver.rtl.css
index aef02ecdb..e8a30d326 100644
--- a/p/themes/Screwdriver/screwdriver.rtl.css
+++ b/p/themes/Screwdriver/screwdriver.rtl.css
@@ -331,7 +331,7 @@ a.btn {
 /*=== Dropdown */
 .dropdown-menu {
 	margin: 5px 0 0;
-	padding: 5px 0;
+	padding: 0.5rem 0 0.25rem 0;
 	background: #222;
 	font-size: 0.8rem;
 	border: 1px solid #171717;
@@ -344,30 +344,43 @@ a.btn {
 	border-color: #171717;
 }
 
-.dropdown-header {
+.dropdown-header,
+.dropdown-section .dropdown-section-title {
 	padding: 0 5px 5px;
 	color: #ccc;
 	font-weight: bold;
 }
 
-.dropdown-menu > .item > a,
-.dropdown-menu > .item > span,
-.dropdown-menu > .item > .as-link {
+.dropdown-menu .item > a,
+.dropdown-menu .item > span,
+.dropdown-menu .item > .as-link {
 	padding: 0 22px;
 	line-height: 2.5em;
 	color: #ccc;
 	font-size: 0.8rem;
 }
 
-.dropdown-menu > .item > label {
-	color: #ccc;
+.dropdown-menu .dropdown-section .item > a,
+.dropdown-menu .dropdown-section .item > span,
+.dropdown-menu .dropdown-section .item > .as-link {
+	padding-right: 2rem;
+}
+
+.dropdown-menu .dropdown-section .item:last-child {
+	margin-bottom: 0.5rem;
 }
 
-.dropdown-menu > .item:hover {
+.dropdown-menu .item > a:hover,
+.dropdown-menu .item > button:hover,
+.dropdown-menu .item > label:hover:not(.noHover) {
 	background: #171717;
 	color: #fff;
 }
 
+.dropdown-menu > .item > label {
+	color: #ccc;
+}
+
 .dropdown-menu > .item[aria-checked="true"] > a::before {
 	font-weight: bold;
 	margin: 0 -14px 0 0;
@@ -379,6 +392,7 @@ a.btn {
 }
 
 .item ~ .dropdown-header,
+.dropdown-section ~ .dropdown-section,
 .item.separator {
 	border-top-color: rgba(255,255,255,0.08);
 }
diff --git a/p/themes/Swage/swage.css b/p/themes/Swage/swage.css
index 3a3202154..2397160b2 100644
--- a/p/themes/Swage/swage.css
+++ b/p/themes/Swage/swage.css
@@ -332,12 +332,23 @@ form th {
 .dropdown-menu .dropdown-header a:hover {
 	background-color: var(--color-background-nav);
 }
+.dropdown-menu .dropdown-section .dropdown-section-title {
+	cursor: default;
+	padding: 0.25rem 0.5rem 0.125rem 0.25rem;
+	font-weight: bold;
+	color: var(--color-text-light);
+}
+.dropdown-menu .dropdown-section .item a {
+	padding: 0 22px;
+}
+.dropdown-menu .dropdown-section .item a:hover {
+	background-color: var(--color-background-nav);
+}
 .dropdown-menu::after {
 	content: none;
 }
 .dropdown-menu > .item {
-	padding: 0;
-	margin-left: 10px;
+	padding: 0 0 0 0.5rem;
 }
 .dropdown-menu > .item > a {
 	min-width: initial;
diff --git a/p/themes/Swage/swage.rtl.css b/p/themes/Swage/swage.rtl.css
index 35cda9308..a021a70cd 100644
--- a/p/themes/Swage/swage.rtl.css
+++ b/p/themes/Swage/swage.rtl.css
@@ -332,12 +332,23 @@ form th {
 .dropdown-menu .dropdown-header a:hover {
 	background-color: var(--color-background-nav);
 }
+.dropdown-menu .dropdown-section .dropdown-section-title {
+	cursor: default;
+	padding: 0.25rem 0.25rem 0.125rem 0.5rem;
+	font-weight: bold;
+	color: var(--color-text-light);
+}
+.dropdown-menu .dropdown-section .item a {
+	padding: 0 22px;
+}
+.dropdown-menu .dropdown-section .item a:hover {
+	background-color: var(--color-background-nav);
+}
 .dropdown-menu::after {
 	content: none;
 }
 .dropdown-menu > .item {
-	padding: 0;
-	margin-right: 10px;
+	padding: 0 0.5rem 0 0;
 }
 .dropdown-menu > .item > a {
 	min-width: initial;
diff --git a/p/themes/Swage/swage.scss b/p/themes/Swage/swage.scss
index fddb287be..9ca316aff 100644
--- a/p/themes/Swage/swage.scss
+++ b/p/themes/Swage/swage.scss
@@ -431,6 +431,25 @@ form {
 		}
 	}
 
+	.dropdown-section {
+		.dropdown-section-title {
+			cursor: default;
+			padding: 0.25rem 0.5rem 0.125rem 0.25rem;
+			font-weight: bold;
+			color: var(--color-text-light);
+		}
+
+		.item {
+			a {
+				padding: 0 22px;
+
+				&:hover {
+					background-color: var(--color-background-nav);
+				}
+			}
+		}
+	}
+
 	&::after {
 		content: none;
 	}
@@ -439,8 +458,7 @@ form {
 		.item {
 
 			@extend %dropdown;
-			padding: 0;
-			margin-left: 10px;
+			padding: 0 0 0 0.5rem;
 
 			> a,
 			> span,
diff --git a/p/themes/base-theme/frss.css b/p/themes/base-theme/frss.css
index 235012fb7..50671f556 100644
--- a/p/themes/base-theme/frss.css
+++ b/p/themes/base-theme/frss.css
@@ -286,8 +286,8 @@ input[type="checkbox"] {
 	width: calc(99% - 5em);
 }
 
-.dropdown-menu > .item > a:hover,
-.dropdown-menu > .item > button:hover {
+.dropdown-menu .item > a:hover,
+.dropdown-menu .item > button:hover {
 	text-decoration: none;
 }
 
@@ -655,13 +655,13 @@ input[type="checkbox"]:focus-visible {
 	display: block;
 }
 
-.dropdown-menu > .item {
+.dropdown-menu .item {
 	display: block;
 }
 
-.dropdown-menu > .item > a,
-.dropdown-menu > .item > .as-link,
-.dropdown-menu > .item > span {
+.dropdown-menu .item > a,
+.dropdown-menu .item > .as-link,
+.dropdown-menu .item > span {
 	display: block;
 	width: 100%;
 	white-space: nowrap;
@@ -702,6 +702,7 @@ input[type="checkbox"]:focus-visible {
 }
 
 .item ~ .dropdown-header,
+.dropdown-section ~ .dropdown-section,
 .item.separator {
 	margin-top: 5px;
 	padding-top: 5px;
@@ -1980,7 +1981,7 @@ input:checked + .slide-container .properties {
 	#panel .close,
 	.dropdown-menu .toggle_aside,
 	#slider .toggle_aside {
-		padding: 1rem;
+		padding: 1rem 0;
 		display: block;
 		width: 100%;
 		border-bottom: 1px solid var(--frss-border-color);
@@ -2005,7 +2006,8 @@ input:checked + .slide-container .properties {
 		position: inherit;
 	}
 
-	.dropdown .dropdown-header {
+	.dropdown .dropdown-header,
+	.dropdown .dropdown-section {
 		line-height: 2;
 	}
 
diff --git a/p/themes/base-theme/frss.rtl.css b/p/themes/base-theme/frss.rtl.css
index 582836b48..cb76b53ca 100644
--- a/p/themes/base-theme/frss.rtl.css
+++ b/p/themes/base-theme/frss.rtl.css
@@ -286,8 +286,8 @@ input[type="checkbox"] {
 	width: calc(99% - 5em);
 }
 
-.dropdown-menu > .item > a:hover,
-.dropdown-menu > .item > button:hover {
+.dropdown-menu .item > a:hover,
+.dropdown-menu .item > button:hover {
 	text-decoration: none;
 }
 
@@ -655,13 +655,13 @@ input[type="checkbox"]:focus-visible {
 	display: block;
 }
 
-.dropdown-menu > .item {
+.dropdown-menu .item {
 	display: block;
 }
 
-.dropdown-menu > .item > a,
-.dropdown-menu > .item > .as-link,
-.dropdown-menu > .item > span {
+.dropdown-menu .item > a,
+.dropdown-menu .item > .as-link,
+.dropdown-menu .item > span {
 	display: block;
 	width: 100%;
 	white-space: nowrap;
@@ -702,6 +702,7 @@ input[type="checkbox"]:focus-visible {
 }
 
 .item ~ .dropdown-header,
+.dropdown-section ~ .dropdown-section,
 .item.separator {
 	margin-top: 5px;
 	padding-top: 5px;
@@ -1980,7 +1981,7 @@ input:checked + .slide-container .properties {
 	#panel .close,
 	.dropdown-menu .toggle_aside,
 	#slider .toggle_aside {
-		padding: 1rem;
+		padding: 1rem 0;
 		display: block;
 		width: 100%;
 		border-bottom: 1px solid var(--frss-border-color);
@@ -2005,7 +2006,8 @@ input:checked + .slide-container .properties {
 		position: inherit;
 	}
 
-	.dropdown .dropdown-header {
+	.dropdown .dropdown-header,
+	.dropdown .dropdown-section {
 		line-height: 2;
 	}