reuse outline styles for header cells

src/internal/styles/forms/mixins.scss

@@ -21,18 +21,6 @@
   box-shadow: 0 0 0 awsui.$border-link-focus-ring-shadow-spread awsui.$color-border-item-focused;
 }
 
-// TODO: implement the same as inline editing cells to have bigger offset from cell edges
-@mixin cell-focus {
-  // For classic
-  outline: thin dotted;
-  outline: awsui.$border-link-focus-ring-outline;
-  outline-offset: -2px;
-  outline-color: awsui.$color-border-item-focused;
-  // For visual refresh
-  border-radius: awsui.$border-radius-control-default-focus-ring;
-  box-shadow: inset 0 0 0 awsui.$border-link-focus-ring-shadow-spread awsui.$color-border-item-focused;
-}
-
 @mixin container-focus($border-radius: awsui.$border-radius-container) {
   // This mixin is different to `focus-highlight` because it needs to supports overflowing
   // content. Using a pseudo element does not take the width or height of the overflowing

src/table/header-cell/styles.scss

@@ -19,11 +19,21 @@
   padding: awsui.$space-scaled-xxs awsui.$space-scaled-xs;
 
   @include focus-visible.when-visible {
-    @include styles.cell-focus;
+    @include styles.focus-highlight(
+      (
+        'vertical': calc(-1 * #{awsui.$space-scaled-xxs}),
+        'horizontal': calc(-1 * #{awsui.$space-scaled-xxs}),
+      )
+    );
   }
   // stylelint-disable-next-line selector-combinator-disallowed-list
   body[data-awsui-focus-visible='true'] &-fake-focus {
-    @include styles.cell-focus;
+    @include styles.focus-highlight(
+      (
+        'vertical': calc(-1 * #{awsui.$space-scaled-xxs}),
+        'horizontal': calc(-1 * #{awsui.$space-scaled-xxs}),
+      )
+    );
   }
 
   &-sticky {
@@ -83,12 +93,6 @@
   &-resizable:not(:last-child):before {
     border-left-color: awsui.$color-border-divider-interactive-default;
   }
-
-  // Hide resize handle when covered by the header cell focus ring.
-  &-fake-focus:before,
-  &:focus:before {
-    opacity: 0;
-  }
 }
 
 .sorting-icon {