Fix custom file input focus border color

Created by: MartijnCuppens

Fixes #27112 (closed).

Also did a tiny optimalization for the border of the browse button. The left border from the ::after pseudo element is now inherited from the element so you don't have to define the border color for every state and the transition of the border color is also applied to the browse button.

Demo: https://codepen.io/MartijnCuppens/pen/bxEyrQ

scss/mixins/_forms.scss

@@ -180,8 +180,6 @@
     &.is-#{$state} {
       ~ .custom-file-label {
         border-color: $color;
-
-        &::after { border-color: inherit; }
       }
 
       ~ .#{$state}-feedback,
@@ -191,6 +189,7 @@
 
       &:focus {
         ~ .custom-file-label {
+          border-color: $color;
           box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
         }
       }

scss/_custom-forms.scss

@@ -258,10 +258,6 @@
   &:focus ~ .custom-file-label {
     border-color: $custom-file-focus-border-color;
     box-shadow: $custom-file-focus-box-shadow;
-
-    &::after {
-      border-color: $custom-file-focus-border-color;
-    }
   }
 
   &:disabled ~ .custom-file-label {
@@ -303,7 +299,7 @@
     color: $custom-file-button-color;
     content: "Browse";
     @include gradient-bg($custom-file-button-bg);
-    border-left: $custom-file-border-width solid $custom-file-border-color;
+    border-left: inherit;
     @include border-radius(0 $custom-file-border-radius $custom-file-border-radius 0);
   }
 }