🔀 Merge branch 'trunk'

# Conflicts:
#	modules/ppcp-settings/resources/js/Components/ReusableComponents/BadgeBox.js

modules/ppcp-settings/resources/css/components/reusable-components/_navigation.scss

@@ -1,25 +1,33 @@
+$margin_bottom: 48px;
+
 .ppcp-r-navigation-container {
+	// Theming.
+	--wp-components-color-accent: #{$color-blueberry};
+	--color-text: #{$color-gray-900};
+	--color-disabled: #CCC;
+	--navbar-height: 40px;
+	--navbar-vertical-padding: 10px;
+	--subnavigation-height: 40px;
+
+	// Styling.
 	position: sticky;
 	top: var(--wp-admin--admin-bar--height);
 	z-index: 10;
 
-	padding: 10px 48px;
-	margin: 0 -20px 48px -20px;
+	padding: 0 48px;
+	margin: 0 -20px #{$margin_bottom} -20px;
 
 	box-shadow: 0 -1px 0 0 $color-gray-300 inset;
 	background: var(--ppcp-color-app-bg);
 	transition: box-shadow 0.3s;
 
-	--wp-components-color-accent: #{$color-blueberry};
-	--color-text: #{$color-gray-900};
-	--color-disabled: #CCC;
-
 	.ppcp-r-navigation {
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
-		flex-direction: column;
-		gap: 10px;
+		flex-direction: row;
+		height: calc(var(--navbar-height) + (2 * var(--navbar-vertical-padding)));
+		padding: var(--navbar-vertical-padding) 0;
 
 		.components-button {
 			@include font(13, 20, 400);
@@ -58,40 +66,46 @@
 				}
 			}
 		}
-		&--row {
-			display: flex;
-			justify-content: space-between;
-			align-items: center;
-			width: 100%;
-			padding-bottom: 10px;
-		}
+	}
 
+	.ppcp-r-navigation--left {
+		align-items: center;
+		display: inline-flex;
+	}
 
-		&--left {
-			align-items: center;
-			display: inline-flex;
+	.ppcp-r-navigation--right {
+		.is-link {
+			padding: 10px 16px;
 		}
+	}
 
-		&--right {
-			.is-link {
-				padding: 10px 16px;
-			}
-		}
-
-		&--progress-bar {
-			position: absolute;
-			bottom: 0;
-			left: 0;
-			background-color: var(--wp-components-color-accent);
-			height: 4px;
-			transition: width 0.3s;
-		}
+	.ppcp-r-navigation--progress-bar {
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		background-color: var(--wp-components-color-accent);
+		height: 4px;
+		transition: width 0.3s;
 	}
 
 	&.ppcp--is-scrolled {
 		box-shadow: 0 -1px 0 0 $color-gray-300 inset, 0 8px 8px 0 rgba(85, 93, 102, .3);
 	}
 
+	.ppcp--top-sub-navigation {
+		height: var(--subnavigation-height);
+		margin: 0;
+		padding: 0;
+
+		.ppcp-r-tabs {
+			margin: 0;
+		}
+
+		.components-tab-panel__tabs-item {
+			height: var(--subnavigation-height);
+		}
+	}
+
 	@media screen and (max-width: 782px) {
 		padding: 10px 12px;
 

modules/ppcp-settings/resources/css/components/reusable-components/_tab-navigation.scss

@@ -1,6 +1,6 @@
 .ppcp-r-tabs {
 	--wp-components-color-accent: #{$color-blueberry};
-	--wp-admin-border-width-focus: 3px;
+	--wp-admin-border-width-focus: 2px;
 
 	transition: max-width 0.2s;
 	margin-top: 10px;
@@ -9,11 +9,9 @@
 	.components-tab-panel__tabs {
 		gap: 0;
 		overflow: auto;
+
 		.components-button {
 			padding: 16px 20px;
-			&.is-active {
-				background-color: #fff4;
-			}
 		}
 	}
 }