fix: focus ring in action card

Author: SpyZzey

src/action-card/motion.scss

@@ -14,7 +14,7 @@
   }
 }
 
-.root::before {
+.root::after {
   @include styles.with-motion {
     transition-property: border-top-color, border-right-color, border-bottom-color, border-left-color;
     transition-duration: awsui.$motion-duration-transition-show-paced;

src/action-card/styles.scss

@@ -148,7 +148,7 @@ $variant-padding-inline: (
   border-block: none;
   border-inline: none;
 
-  &:before {
+  &:after {
     @include styles.base-pseudo-element;
 
     box-shadow: none;
@@ -210,7 +210,7 @@ $variant-padding-inline: (
     @each $variant in ('embedded', 'default') {
       &.variant-#{$variant} {
         &,
-        &:before {
+        &:after {
           @include apply-border-radius($variant, 'disabled');
         }
       }
@@ -220,7 +220,7 @@ $variant-padding-inline: (
       color: awsui.$color-icon-action-card-disabled;
     }
 
-    &:before {
+    &:after {
       border-color: var(#{custom-props.$styleActionCardBorderColorDisabled}, awsui.$color-border-action-card-disabled);
       border-block-width: var(
         #{custom-props.$styleActionCardBorderWidthDisabled},
@@ -244,13 +244,13 @@ $variant-padding-inline: (
     @each $variant in ('embedded', 'default') {
       &.variant-#{$variant} {
         &,
-        &:before {
+        &:after {
           @include apply-border-radius($variant, 'hover');
         }
       }
     }
 
-    &:before {
+    &:after {
       border-color: var(#{custom-props.$styleActionCardBorderColorHover}, awsui.$color-border-action-card-hover);
       border-block-width: var(#{custom-props.$styleActionCardBorderWidthHover}, awsui.$border-width-action-card-hover);
       border-inline-width: var(#{custom-props.$styleActionCardBorderWidthHover}, awsui.$border-width-action-card-hover);
@@ -269,13 +269,13 @@ $variant-padding-inline: (
     @each $variant in ('embedded', 'default') {
       &.variant-#{$variant} {
         &,
-        &:before {
+        &:after {
           @include apply-border-radius($variant, 'active');
         }
       }
     }
 
-    &:before {
+    &:after {
       border-color: var(#{custom-props.$styleActionCardBorderColorActive}, awsui.$color-border-action-card-active);
       border-block-width: var(
         #{custom-props.$styleActionCardBorderWidthActive},
@@ -302,18 +302,18 @@ $variant-padding-inline: (
 
   @include focus-visible.when-visible {
     @include styles.focus-highlight(
-      0px,
-      var(#{custom-props.$styleActionCardFocusRingBorderRadius}, awsui.$border-radius-action-card),
+      2px,
+      var(#{custom-props.$styleActionCardFocusRingBorderRadius}, awsui.$border-radius-control-default-focus-ring),
       0 0 0 var(#{custom-props.$styleActionCardFocusRingBorderWidth}, 2px)
         var(#{custom-props.$styleActionCardFocusRingBorderColor}, awsui.$color-border-item-focused)
     );
 
     @each $variant in ('embedded', 'default') {
       &.variant-#{$variant}::before {
-        $focus-radius: var(#{custom-props.$styleActionCardFocusRingBorderRadius}, awsui.$border-radius-action-card);
-        border-start-start-radius: $focus-radius;
-        border-start-end-radius: $focus-radius;
-        border-end-start-radius: $focus-radius;
+        $focus-radius: var(
+          #{custom-props.$styleActionCardFocusRingBorderRadius},
+          awsui.$border-radius-control-default-focus-ring
+        );
         border-end-end-radius: $focus-radius;
       }
     }
@@ -322,7 +322,7 @@ $variant-padding-inline: (
   @each $variant in ('embedded', 'default') {
     &.variant-#{$variant} {
       &,
-      &:before {
+      &:after {
         @include apply-border-radius($variant);
       }