Pane: move the styles for pane-title-button and pane-close-button into the pane-header() mixin to resolve specificity issues. See #78367

Author: Stefanie Hein

src/scss/themes/fylr/components/_pane.scss

@@ -40,70 +40,6 @@
 	.cui-select {
 		margin-right: $spacer-xs;
 	}
-
-	.cui-pane-close-button {
-		transform: translateX($spacer-sm);
-	}
-
-	// Pane Header title is clickable and works as a pane-close-button
-	&:has(.cui-pane-close-button-with-title) {
-		> .cui-horizontal-layout-left {
-			width: 100%;
-
-			> .cui-buttonbar {
-				width: 100%;
-			}
-		}
-		
-		.cui-pane-close-button-with-title {
-			width: 100%;
-			max-width: 100%;
-
-			@include button-color-reset();
-
-			.cui-button-visual {
-				@include h3(0);
-
-				justify-content: space-between;
-
-				.cui-button-center {
-					padding-left: 0;
-				}
-
-				.cui-button-right {
-					padding-right: $spacer-xs;
-				}
-			}
-
-			&:not(.cui-disabled) {				
-				transform: translateX(3px);
-
-				&:focus .cui-button-visual.cui-button-visual {
-					--focus-shadow-outer-width: 0px;
-					
-					box-shadow: none !important;
-					border: 0;
-
-					&::after {
-						content: '';
-						display: block;
-						position: absolute;
-						top: 3px;
-						left: -2px;
-						width: calc(100% - 3px);
-						height: calc(100% - 5px);
-						outline: 3px solid $focused;
-						outline-offset: -2px;
-						border-radius: 1px;
-					}
-
-					.cui-button-right {
-						padding-right: $spacer-sm;
-					}
-				}
-			}
-		}	
-	}
 }
 
 .cui-pane-footer {

src/scss/themes/fylr/mixins/_pane.scss

@@ -55,4 +55,47 @@
 			}
 		}
 	}
+
+	.cui-pane-close-button:not(.cui-disabled) {
+		$pane-close-button-offset: 4px;
+		
+		transform: translateX($pane-close-button-offset);
+
+		.cui-button-visual {
+			min-width: 20px; // make explicetely narrower to move to the very right
+		}
+
+		&:focus .cui-button-visual.cui-button-visual {
+			box-shadow: none !important;
+			border: 0;
+
+			&::after {
+				content: '';
+				display: block;
+				position: absolute;
+				top: 5px;
+				left: 0.5 * $pane-close-button-offset;
+				width: calc(100% - (2 * $pane-close-button-offset));
+				height: calc(100% - 10px);
+				outline: 2px solid $focused;
+				border-radius: 0.5px;
+			}
+		}
+	}
+
+	// Pane Header title is clickable and works as a pane-close-button
+	.cui-pane-title-button {
+		@include button-color-reset();
+
+		.cui-button-visual {
+			@include h3(0);
+
+			justify-content: space-between;
+
+			.cui-button-center {
+				padding-left: 2px;
+				padding-right: 2px;
+			}
+		}
+	}		
 }