Improved: Remove <li> as separator (#4597)

* templates

* themes

* fix

* fix

* fixes

* fix

31 files changed, 193 insertions, 159 deletions

diff --git a/p/themes/Alternative-Dark/adark.css b/p/themes/Alternative-Dark/adark.css
index 7b6efda44..9a771e51c 100644
--- a/p/themes/Alternative-Dark/adark.css
+++ b/p/themes/Alternative-Dark/adark.css
@@ -409,9 +409,9 @@ a.btn {
 	border-radius: 3px;
 }
 
-.separator {
-	margin: 5px 0;
-	border-bottom: 1px solid var(--border-color-dark);
+.item ~ .dropdown-header,
+.item.separator {
+	border-top-color: var(--border-color-dark);
 }
 
 /*=== Alerts */
diff --git a/p/themes/Alternative-Dark/adark.rtl.css b/p/themes/Alternative-Dark/adark.rtl.css
index c461a2896..0368a9761 100644
--- a/p/themes/Alternative-Dark/adark.rtl.css
+++ b/p/themes/Alternative-Dark/adark.rtl.css
@@ -409,9 +409,9 @@ a.btn {
 	border-radius: 3px;
 }
 
-.separator {
-	margin: 5px 0;
-	border-bottom: 1px solid var(--border-color-dark);
+.item ~ .dropdown-header,
+.item.separator {
+	border-top-color: var(--border-color-dark);
 }
 
 /*=== Alerts */
diff --git a/p/themes/Ansum/_components.scss b/p/themes/Ansum/_components.scss
index acb2430ff..35298b4de 100644
--- a/p/themes/Ansum/_components.scss
+++ b/p/themes/Ansum/_components.scss
@@ -38,8 +38,7 @@
 	}
 
 	.dropdown-header {
-		// padding: 0 5px 5px;
-		margin: 1rem 0.5rem 1rem 1rem;
+		padding: 1rem 0.5rem 1rem 1rem;
 		font-weight: bold;
 		text-align: left;
 		color: variables.$grey-dark;
@@ -74,12 +73,35 @@
 			}
 		}
 
+		&:not(.addItem) {
+			a:hover,
+			button:hover {
+				background: variables.$main-first;
+				color: variables.$white;
+
+				.icon {
+					filter: brightness(3);
+				}
+			}
+		}
+
 		&[aria-checked="true"] {
 			a::before {
 				margin: 0 0 0 -14px;
 				font-weight: bold;
 			}
 		}
+
+		~ .dropdown-header {
+			margin-top: 0.75rem;
+			padding-top: 1.75rem;
+			border-top-color: variables.$grey-light;
+		}
+
+		&.separator {
+			margin-top: 0.75rem;
+			border-top-color: variables.$grey-light;
+		}
 	}
 
 	.input {
@@ -90,12 +112,6 @@
 		}
 	}
 
-	.separator {
-		margin: 0.75rem 0;
-		border-bottom: 1px solid variables.$grey-light;
-		// display: none;
-	}
-
 }
 
 .tree .tree-folder .tree-folder-items .dropdown-menu {
diff --git a/p/themes/Ansum/ansum.css b/p/themes/Ansum/ansum.css
index 0aeae0e08..8e2ace58e 100644
--- a/p/themes/Ansum/ansum.css
+++ b/p/themes/Ansum/ansum.css
@@ -243,7 +243,7 @@ form th {
 	right: 17px;
 }
 .dropdown-menu .dropdown-header {
-	margin: 1rem 0.5rem 1rem 1rem;
+	padding: 1rem 0.5rem 1rem 1rem;
 	font-weight: bold;
 	text-align: left;
 	color: #766556;
@@ -270,19 +270,33 @@ form th {
 .dropdown-menu .item:not(.addItem):hover .icon {
 	filter: grayscale(100%) brightness(2.5);
 }
+.dropdown-menu .item:not(.addItem) a:hover,
+.dropdown-menu .item:not(.addItem) button:hover {
+	background: #ca7227;
+	color: #fff;
+}
+.dropdown-menu .item:not(.addItem) a:hover .icon,
+.dropdown-menu .item:not(.addItem) button:hover .icon {
+	filter: brightness(3);
+}
 .dropdown-menu .item[aria-checked=true] a::before {
 	margin: 0 0 0 -14px;
 	font-weight: bold;
 }
+.dropdown-menu .item ~ .dropdown-header {
+	margin-top: 0.75rem;
+	padding-top: 1.75rem;
+	border-top-color: #f5f0ec;
+}
+.dropdown-menu .item.separator {
+	margin-top: 0.75rem;
+	border-top-color: #f5f0ec;
+}
 .dropdown-menu .input select, .dropdown-menu .input input {
 	margin: 0 auto 5px;
 	padding: 2px 5px;
 	border-radius: 3px;
 }
-.dropdown-menu .separator {
-	margin: 0.75rem 0;
-	border-bottom: 1px solid #f5f0ec;
-}
 
 .tree .tree-folder .tree-folder-items .dropdown-menu .item {
 	padding: 0;
@@ -1363,6 +1377,4 @@ body.register {
 a, button.as-link {
 	outline: none;
 	color: #ca7227;
-}
-
-/*# sourceMappingURL=ansum.css.map */
+}
\ No newline at end of file
diff --git a/p/themes/Ansum/ansum.rtl.css b/p/themes/Ansum/ansum.rtl.css
index 429cb36aa..f09f5c1bf 100644
--- a/p/themes/Ansum/ansum.rtl.css
+++ b/p/themes/Ansum/ansum.rtl.css
@@ -243,7 +243,7 @@ form th {
 	left: 17px;
 }
 .dropdown-menu .dropdown-header {
-	margin: 1rem 1rem 1rem 0.5rem;
+	padding: 1rem 1rem 1rem 0.5rem;
 	font-weight: bold;
 	text-align: right;
 	color: #766556;
@@ -270,19 +270,33 @@ form th {
 .dropdown-menu .item:not(.addItem):hover .icon {
 	filter: grayscale(100%) brightness(2.5);
 }
+.dropdown-menu .item:not(.addItem) a:hover,
+.dropdown-menu .item:not(.addItem) button:hover {
+	background: #ca7227;
+	color: #fff;
+}
+.dropdown-menu .item:not(.addItem) a:hover .icon,
+.dropdown-menu .item:not(.addItem) button:hover .icon {
+	filter: brightness(3);
+}
 .dropdown-menu .item[aria-checked=true] a::before {
 	margin: 0 -14px 0 0;
 	font-weight: bold;
 }
+.dropdown-menu .item ~ .dropdown-header {
+	margin-top: 0.75rem;
+	padding-top: 1.75rem;
+	border-top-color: #f5f0ec;
+}
+.dropdown-menu .item.separator {
+	margin-top: 0.75rem;
+	border-top-color: #f5f0ec;
+}
 .dropdown-menu .input select, .dropdown-menu .input input {
 	margin: 0 auto 5px;
 	padding: 2px 5px;
 	border-radius: 3px;
 }
-.dropdown-menu .separator {
-	margin: 0.75rem 0;
-	border-bottom: 1px solid #f5f0ec;
-}
 
 .tree .tree-folder .tree-folder-items .dropdown-menu .item {
 	padding: 0;
@@ -1363,4 +1377,4 @@ body.register {
 a, button.as-link {
 	outline: none;
 	color: #ca7227;
-}
+}
\ No newline at end of file
diff --git a/p/themes/BlueLagoon/BlueLagoon.css b/p/themes/BlueLagoon/BlueLagoon.css
index a375427ff..00b9589b0 100644
--- a/p/themes/BlueLagoon/BlueLagoon.css
+++ b/p/themes/BlueLagoon/BlueLagoon.css
@@ -365,10 +365,6 @@ a.btn {
 	transform: rotate(45deg);
 }
 
-.configure .dropdown-header {
-	display: none;
-}
-
 .dropdown-header {
 	padding: 0 5px 5px;
 	color: #ccc;
@@ -404,10 +400,9 @@ a.btn {
 	margin: 0 0 0 -14px;
 }
 
-.separator {
-	margin: 5px 0;
-	border-bottom: 1px solid #171717;
-	box-shadow: 0 1px rgba(255,255,255,0.08);
+.item ~ .dropdown-header,
+.item.separator {
+	border-top-color: rgba(255,255,255,0.08);
 }
 
 /*=== Alerts */
diff --git a/p/themes/BlueLagoon/BlueLagoon.rtl.css b/p/themes/BlueLagoon/BlueLagoon.rtl.css
index 778a5cecd..d2d0c0d5d 100644
--- a/p/themes/BlueLagoon/BlueLagoon.rtl.css
+++ b/p/themes/BlueLagoon/BlueLagoon.rtl.css
@@ -365,10 +365,6 @@ a.btn {
 	transform: rotate(-45deg);
 }
 
-.configure .dropdown-header {
-	display: none;
-}
-
 .dropdown-header {
 	padding: 0 5px 5px;
 	color: #ccc;
@@ -404,10 +400,9 @@ a.btn {
 	margin: 0 -14px 0 0;
 }
 
-.separator {
-	margin: 5px 0;
-	border-bottom: 1px solid #171717;
-	box-shadow: 0 1px rgba(255,255,255,0.08);
+.item ~ .dropdown-header,
+.item.separator {
+	border-top-color: rgba(255,255,255,0.08);
 }
 
 /*=== Alerts */
diff --git a/p/themes/Dark/dark.css b/p/themes/Dark/dark.css
index 0b05dfba4..e1bfd7bd4 100644
--- a/p/themes/Dark/dark.css
+++ b/p/themes/Dark/dark.css
@@ -384,9 +384,9 @@ a.btn {
 	border-radius: 3px;
 }
 
-.separator {
-	margin: 5px 0;
-	border-bottom: 1px solid #333;
+.item ~ .dropdown-header,
+.item.separator {
+	border-top-color: #333;
 }
 
 /*=== Alerts */
diff --git a/p/themes/Dark/dark.rtl.css b/p/themes/Dark/dark.rtl.css
index e12b45368..5e1cfdba5 100644
--- a/p/themes/Dark/dark.rtl.css
+++ b/p/themes/Dark/dark.rtl.css
@@ -384,9 +384,9 @@ a.btn {
 	border-radius: 3px;
 }
 
-.separator {
-	margin: 5px 0;
-	border-bottom: 1px solid #333;
+.item ~ .dropdown-header,
+.item.separator {
+	border-top-color: #333;
 }
 
 /*=== Alerts */
diff --git a/p/themes/Flat/flat.css b/p/themes/Flat/flat.css
index 14efcf175..548a02036 100644
--- a/p/themes/Flat/flat.css
+++ b/p/themes/Flat/flat.css
@@ -386,9 +386,9 @@ a.btn {
 	border-radius: 3px;
 }
 
-.separator {
-	margin: 5px 0;
-	border-bottom: 1px solid #ddd;
+.item ~ .dropdown-header,
+.item.separator {
+	border-top-color: #ddd;
 }
 
 /*=== Alerts */
diff --git a/p/themes/Flat/flat.rtl.css b/p/themes/Flat/flat.rtl.css
index aa18c40db..bd3f38cd8 100644
--- a/p/themes/Flat/flat.rtl.css
+++ b/p/themes/Flat/flat.rtl.css
@@ -386,9 +386,9 @@ a.btn {
 	border-radius: 3px;
 }
 
-.separator {
-	margin: 5px 0;
-	border-bottom: 1px solid #ddd;
+.item ~ .dropdown-header,
+.item.separator {
+	border-top-color: #ddd;
 }
 
 /*=== Alerts */
diff --git a/p/themes/Mapco/_components.scss b/p/themes/Mapco/_components.scss
index 594ef4371..cf7aca73d 100644
--- a/p/themes/Mapco/_components.scss
+++ b/p/themes/Mapco/_components.scss
@@ -38,13 +38,12 @@
 	}
 
 	.dropdown-header {
-		margin: 1rem 0.5rem 1rem 1rem;
+		padding: 1rem 0.5rem 1rem 1rem;
 		font-weight: bold;
 		text-align: left;
 		color: variables.$grey-dark;
 		text-transform: uppercase;
 		letter-spacing: 1px;
-
 	}
 
 	.item {
@@ -58,17 +57,15 @@
 			line-height: 2.5em;
 		}
 
-		&:not(.addItem):hover {
-			background: variables.$main-first;
-			color: variables.$white;
-
-			.icon {
-				filter: brightness(3);
-			}
-
-			a, button, label {
-				text-decoration: none;
+		&:not(.addItem) {
+			a:hover,
+			button:hover {
+				background: variables.$main-first;
 				color: variables.$white;
+
+				.icon {
+					filter: brightness(3);
+				}
 			}
 		}
 
@@ -78,6 +75,17 @@
 				font-weight: bold;
 			}
 		}
+
+		~ .dropdown-header {
+			margin-top: 0.75rem;
+			padding-top: 1.75rem;
+			border-top-color: variables.$grey-light;
+		}
+
+		&.separator {
+			margin-top: 0.75rem;
+			border-top-color: variables.$grey-light;
+		}
 	}
 
 	.input {
@@ -87,12 +95,6 @@
 			border-radius: 3px;
 		}
 	}
-
-	.separator {
-		margin: 0.75rem 0;
-		border-bottom: 1px solid variables.$grey-light;
-	}
-
 }
 
 .tree .tree-folder .tree-folder-items .dropdown-menu {
diff --git a/p/themes/Mapco/mapco.css b/p/themes/Mapco/mapco.css
index e1c1d262c..01586510b 100644
--- a/p/themes/Mapco/mapco.css
+++ b/p/themes/Mapco/mapco.css
@@ -242,7 +242,7 @@ form th {
 	right: 18px;
 }
 .dropdown-menu .dropdown-header {
-	margin: 1rem 0.5rem 1rem 1rem;
+	padding: 1rem 0.5rem 1rem 1rem;
 	font-weight: bold;
 	text-align: left;
 	color: #5b6871;
@@ -258,30 +258,33 @@ form th {
 	font-size: 1rem;
 	line-height: 2.5em;
 }
-.dropdown-menu .item:not(.addItem):hover {
+.dropdown-menu .item:not(.addItem) a:hover,
+.dropdown-menu .item:not(.addItem) button:hover {
 	background: #36c;
 	color: #fff;
 }
-.dropdown-menu .item:not(.addItem):hover .icon {
+.dropdown-menu .item:not(.addItem) a:hover .icon,
+.dropdown-menu .item:not(.addItem) button:hover .icon {
 	filter: brightness(3);
 }
-.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[aria-checked=true] a::before {
 	margin: 0 0 0 -14px;
 	font-weight: bold;
 }
+.dropdown-menu .item ~ .dropdown-header {
+	margin-top: 0.75rem;
+	padding-top: 1.75rem;
+	border-top-color: #eff0f2;
+}
+.dropdown-menu .item.separator {
+	margin-top: 0.75rem;
+	border-top-color: #eff0f2;
+}
 .dropdown-menu .input select, .dropdown-menu .input input {
 	margin: 0 auto 5px;
 	padding: 2px 5px;
 	border-radius: 3px;
 }
-.dropdown-menu .separator {
-	margin: 0.75rem 0;
-	border-bottom: 1px solid #eff0f2;
-}
 
 .tree .tree-folder .tree-folder-items .dropdown-menu .item {
 	padding: 0;
@@ -1394,6 +1397,4 @@ body.register {
 a, button.as-link {
 	outline: none;
 	color: #36c;
-}
-
-/*# sourceMappingURL=mapco.css.map */
+}
\ No newline at end of file
diff --git a/p/themes/Mapco/mapco.rtl.css b/p/themes/Mapco/mapco.rtl.css
index 5aa6c6ee6..1a14433c0 100644
--- a/p/themes/Mapco/mapco.rtl.css
+++ b/p/themes/Mapco/mapco.rtl.css
@@ -242,7 +242,7 @@ form th {
 	left: 18px;
 }
 .dropdown-menu .dropdown-header {
-	margin: 1rem 1rem 1rem 0.5rem;
+	padding: 1rem 1rem 1rem 0.5rem;
 	font-weight: bold;
 	text-align: right;
 	color: #5b6871;
@@ -258,30 +258,33 @@ form th {
 	font-size: 1rem;
 	line-height: 2.5em;
 }
-.dropdown-menu .item:not(.addItem):hover {
+.dropdown-menu .item:not(.addItem) a:hover,
+.dropdown-menu .item:not(.addItem) button:hover {
 	background: #36c;
 	color: #fff;
 }
-.dropdown-menu .item:not(.addItem):hover .icon {
+.dropdown-menu .item:not(.addItem) a:hover .icon,
+.dropdown-menu .item:not(.addItem) button:hover .icon {
 	filter: brightness(3);
 }
-.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[aria-checked=true] a::before {
 	margin: 0 -14px 0 0;
 	font-weight: bold;
 }
+.dropdown-menu .item ~ .dropdown-header {
+	margin-top: 0.75rem;
+	padding-top: 1.75rem;
+	border-top-color: #eff0f2;
+}
+.dropdown-menu .item.separator {
+	margin-top: 0.75rem;
+	border-top-color: #eff0f2;
+}
 .dropdown-menu .input select, .dropdown-menu .input input {
 	margin: 0 auto 5px;
 	padding: 2px 5px;
 	border-radius: 3px;
 }
-.dropdown-menu .separator {
-	margin: 0.75rem 0;
-	border-bottom: 1px solid #eff0f2;
-}
 
 .tree .tree-folder .tree-folder-items .dropdown-menu .item {
 	padding: 0;
@@ -1394,4 +1397,4 @@ body.register {
 a, button.as-link {
 	outline: none;
 	color: #36c;
-}
+}
\ No newline at end of file
diff --git a/p/themes/Nord/nord.css b/p/themes/Nord/nord.css
index 5b41edcd4..3c7a1241a 100644
--- a/p/themes/Nord/nord.css
+++ b/p/themes/Nord/nord.css
@@ -289,9 +289,9 @@ a.btn {
 	display: none;
 }
 
-.separator {
-	margin: 5px 0;
-	border-bottom: 1px solid var(--border);
+.item ~ .dropdown-header,
+.item.separator {
+	border-top-color: var(--border);
 }
 
 /*=== Alerts */
diff --git a/p/themes/Nord/nord.rtl.css b/p/themes/Nord/nord.rtl.css
index fd6aa7dd3..dee347419 100644
--- a/p/themes/Nord/nord.rtl.css
+++ b/p/themes/Nord/nord.rtl.css
@@ -289,9 +289,9 @@ a.btn {
 	display: none;
 }
 
-.separator {
-	margin: 5px 0;
-	border-bottom: 1px solid var(--border);
+.item ~ .dropdown-header,
+.item.separator {
+	border-top-color: var(--border);
 }
 
 /*=== Alerts */
diff --git a/p/themes/Origine-compact/origine-compact.css b/p/themes/Origine-compact/origine-compact.css
index 0ff045c8c..16e7143ad 100644
--- a/p/themes/Origine-compact/origine-compact.css
+++ b/p/themes/Origine-compact/origine-compact.css
@@ -45,6 +45,11 @@ a.btn,
 }
 
 /*=== Dropdown */
+.item ~ .dropdown-header,
+.item.separator {
+	border-top-color: #ddd;
+}
+
 /*=== Alerts */
 /*=== Pagination */
 /*=== Boxes */
diff --git a/p/themes/Origine-compact/origine-compact.rtl.css b/p/themes/Origine-compact/origine-compact.rtl.css
index 368200eaf..9ddfe00c4 100644
--- a/p/themes/Origine-compact/origine-compact.rtl.css
+++ b/p/themes/Origine-compact/origine-compact.rtl.css
@@ -45,6 +45,11 @@ a.btn,
 }
 
 /*=== Dropdown */
+.item ~ .dropdown-header,
+.item.separator {
+	border-top-color: #ddd;
+}
+
 /*=== Alerts */
 /*=== Pagination */
 /*=== Boxes */
diff --git a/p/themes/Origine/origine.css b/p/themes/Origine/origine.css
index 6ef335fdd..8bcfc0ff8 100644
--- a/p/themes/Origine/origine.css
+++ b/p/themes/Origine/origine.css
@@ -389,9 +389,9 @@ a.btn,
 	border-radius: 3px;
 }
 
-.separator {
-	margin: 5px 0;
-	border-bottom: 1px solid #ddd;
+.item ~ .dropdown-header,
+.item.separator {
+	border-top-color: #ddd;
 }
 
 /*=== Alerts */
diff --git a/p/themes/Origine/origine.rtl.css b/p/themes/Origine/origine.rtl.css
index f52dcc1c3..216585cbe 100644
--- a/p/themes/Origine/origine.rtl.css
+++ b/p/themes/Origine/origine.rtl.css
@@ -389,9 +389,9 @@ a.btn,
 	border-radius: 3px;
 }
 
-.separator {
-	margin: 5px 0;
-	border-bottom: 1px solid #ddd;
+.item ~ .dropdown-header,
+.item.separator {
+	border-top-color: #ddd;
 }
 
 /*=== Alerts */
diff --git a/p/themes/Pafat/pafat.css b/p/themes/Pafat/pafat.css
index aef22b4ca..4c69851fb 100644
--- a/p/themes/Pafat/pafat.css
+++ b/p/themes/Pafat/pafat.css
@@ -346,9 +346,9 @@ a.btn {
 	border-radius: 3px;
 }
 
-.separator {
-	margin: 5px 0;
-	border-bottom: 1px solid #ddd;
+.item ~ .dropdown-header,
+.item.separator {
+	border-top-color: #ddd;
 }
 
 /*=== Alerts */
diff --git a/p/themes/Pafat/pafat.rtl.css b/p/themes/Pafat/pafat.rtl.css
index dea595bda..12405ef12 100644
--- a/p/themes/Pafat/pafat.rtl.css
+++ b/p/themes/Pafat/pafat.rtl.css
@@ -346,9 +346,9 @@ a.btn {
 	border-radius: 3px;
 }
 
-.separator {
-	margin: 5px 0;
-	border-bottom: 1px solid #ddd;
+.item ~ .dropdown-header,
+.item.separator {
+	border-top-color: #ddd;
 }
 
 /*=== Alerts */
diff --git a/p/themes/Screwdriver/screwdriver.css b/p/themes/Screwdriver/screwdriver.css
index a34547044..668423af9 100644
--- a/p/themes/Screwdriver/screwdriver.css
+++ b/p/themes/Screwdriver/screwdriver.css
@@ -359,10 +359,6 @@ a.btn {
 	border-color: #171717;
 }
 
-.configure .dropdown-header {
-	display: none;
-}
-
 .dropdown-header {
 	padding: 0 5px 5px;
 	color: #ccc;
@@ -397,10 +393,9 @@ a.btn {
 	text-decoration: none;
 }
 
-.separator {
-	margin: 5px 0;
-	border-bottom: 1px solid #171717;
-	box-shadow: 0 1px rgba(255,255,255,0.08);
+.item ~ .dropdown-header,
+.item.separator {
+	border-top-color: rgba(255,255,255,0.08);
 }
 
 /*=== Alerts */
diff --git a/p/themes/Screwdriver/screwdriver.rtl.css b/p/themes/Screwdriver/screwdriver.rtl.css
index 97f3590b2..1f7415bd8 100644
--- a/p/themes/Screwdriver/screwdriver.rtl.css
+++ b/p/themes/Screwdriver/screwdriver.rtl.css
@@ -359,10 +359,6 @@ a.btn {
 	border-color: #171717;
 }
 
-.configure .dropdown-header {
-	display: none;
-}
-
 .dropdown-header {
 	padding: 0 5px 5px;
 	color: #ccc;
@@ -397,10 +393,9 @@ a.btn {
 	text-decoration: none;
 }
 
-.separator {
-	margin: 5px 0;
-	border-bottom: 1px solid #171717;
-	box-shadow: 0 1px rgba(255,255,255,0.08);
+.item ~ .dropdown-header,
+.item.separator {
+	border-top-color: rgba(255,255,255,0.08);
 }
 
 /*=== Alerts */
diff --git a/p/themes/Swage/swage.css b/p/themes/Swage/swage.css
index f4e9a730b..e0190aac2 100644
--- a/p/themes/Swage/swage.css
+++ b/p/themes/Swage/swage.css
@@ -397,9 +397,9 @@ form th {
 	right: auto;
 }
 
-.separator {
-	margin: 5px 0;
-	border-bottom: 1px solid #e3e3e3;
+.item ~ .dropdown-header,
+.item.separator {
+	border-top-color: #e3e3e3;
 	cursor: default;
 }
 
diff --git a/p/themes/Swage/swage.rtl.css b/p/themes/Swage/swage.rtl.css
index 083c18163..35ebc4cc6 100644
--- a/p/themes/Swage/swage.rtl.css
+++ b/p/themes/Swage/swage.rtl.css
@@ -397,9 +397,9 @@ form th {
 	left: auto;
 }
 
-.separator {
-	margin: 5px 0;
-	border-bottom: 1px solid #e3e3e3;
+.item ~ .dropdown-header,
+.item.separator {
+	border-top-color: #e3e3e3;
 	cursor: default;
 }
 
diff --git a/p/themes/Swage/swage.scss b/p/themes/Swage/swage.scss
index 13da77b26..e2fc58ac1 100644
--- a/p/themes/Swage/swage.scss
+++ b/p/themes/Swage/swage.scss
@@ -522,9 +522,9 @@ form {
 	}
 }
 
-.separator {
-	margin: 5px 0;
-	border-bottom: 1px solid color.adjust( $color_light, $lightness: -10%);
+.item ~ .dropdown-header,
+.item.separator {
+	border-top-color: color.adjust( $color_light, $lightness: -10%);
 	cursor: default;
 }
 
diff --git a/p/themes/base-theme/base.css b/p/themes/base-theme/base.css
index 6c0531969..f07f81b7f 100644
--- a/p/themes/base-theme/base.css
+++ b/p/themes/base-theme/base.css
@@ -289,10 +289,6 @@ a.btn {
 	padding: 2px 5px;
 }
 
-.separator {
-	margin: 5px 0;
-}
-
 /*=== Alerts */
 .alert {
 	margin: 15px auto;
diff --git a/p/themes/base-theme/base.rtl.css b/p/themes/base-theme/base.rtl.css
index a25776f1d..a7603ed44 100644
--- a/p/themes/base-theme/base.rtl.css
+++ b/p/themes/base-theme/base.rtl.css
@@ -289,10 +289,6 @@ a.btn {
 	padding: 2px 5px;
 }
 
-.separator {
-	margin: 5px 0;
-}
-
 /*=== Alerts */
 .alert {
 	margin: 15px auto;
diff --git a/p/themes/base-theme/frss.css b/p/themes/base-theme/frss.css
index fdc99e8a7..209b24431 100644
--- a/p/themes/base-theme/frss.css
+++ b/p/themes/base-theme/frss.css
@@ -691,10 +691,12 @@ input[type="checkbox"]:focus-visible {
 	cursor: default;
 }
 
-.separator {
-	display: block;
-	height: 0;
-	border-bottom: 1px solid var(--frss-border-color);
+.item ~ .dropdown-header,
+.item.separator {
+	margin-top: 5px;
+	padding-top: 5px;
+	border-top-width: 1px;
+	border-top-style: solid;
 }
 
 /*=== Alerts */
diff --git a/p/themes/base-theme/frss.rtl.css b/p/themes/base-theme/frss.rtl.css
index 5d3b0eab7..4608af9b8 100644
--- a/p/themes/base-theme/frss.rtl.css
+++ b/p/themes/base-theme/frss.rtl.css
@@ -691,10 +691,12 @@ input[type="checkbox"]:focus-visible {
 	cursor: default;
 }
 
-.separator {
-	display: block;
-	height: 0;
-	border-bottom: 1px solid var(--frss-border-color);
+.item ~ .dropdown-header,
+.item.separator {
+	margin-top: 5px;
+	padding-top: 5px;
+	border-top-width: 1px;
+	border-top-style: solid;
 }
 
 /*=== Alerts */