Fix focus on custom-file input in Firefox

[alecpl]

Fixes #26563.

[alecpl]

I noticed that there are two more issues:

1. Similar hack might be needed for form validation classes
2. $enable-shadows is ignored on custom-file input focus
   Feel free to take over the PR to fix these.

[ysds]

I know it is an edge case, but :focus-within causes double focus ring if .custom-file contains other focusable elements.

https://codepen.io/anon/pen/GdaGeL

[alecpl]

@ysds, a valid one, I didn't find solution for this case.

[mdo]

Similar hack might be needed for form validation classes

Yup, we definitely need this, too.

[MartijnCuppens]

Closing this since this PR introduces the behaviour @ysds mentions above

[marveloo]

The idea of using :focus-within instead of :focus for firefox was good (and it still is) but it looks like it was forgotten that :focus-within also works on the element itself and not only on its children. Since HTML inputs never have children, both pseudo-classes can be used interchangeably on file inputs. So instead of referencing .custom-file's children:

.custom-file:focus-within > .custom-file-label

We can reference the .custom-file-input itself and then use ~:

.custom-file-input:focus-within ~ .custom-file-label

[MartijnCuppens]

@marveloo, feel free to open a new PR for your solution.