fix(material/sort): double focus indicators when strong focus is enabled (#33520)

Fixes that the sort header both its usual focus indicator and the strong focus one when strong focus is enabled.

Fixes #33519.

Author: crisbeto

src/material/core/focus-indicators/_private.scss

@@ -61,6 +61,9 @@ $default-border-radius: 4px;
     'mat-focus-indicator-border-radius': $border-radius,
     'mat-focus-indicator-border-color': $border-color,
     'mat-focus-indicator-display': $display,
+    // This isn't used for styling the actual focus indicator, but can
+    // be used to hide conflicting indicators when strong focus is enabled.
+    'mat-focus-indicator-fallback-border-style': none,
   );
 
   @if (&) {

src/material/sort/sort-header.scss

@@ -25,14 +25,14 @@ $fallbacks: m3-sort.get-tokens();
   // active, the arrow will always be shown so the user has no way of telling the difference.
   [mat-sort-header].cdk-keyboard-focused &,
   [mat-sort-header].cdk-program-focused & {
-    border-bottom: solid 1px currentColor;
+    border-bottom: var(--mat-focus-indicator-fallback-border-style, solid) 1px currentColor;
   }
 
   // For the sort-header element, default inset/offset values are necessary to ensure that
   // the focus indicator is sufficiently contrastive and renders appropriately.
   &::before {
     $border-width: var(--mat-focus-indicator-border-width, #{private.$default-border-width});
-    $offset: calc(#{$border-width} + 2px);
+    $offset: calc(#{$border-width} + 4px);
     margin: calc(#{$offset} * -1);
   }
 }