Customizing <vaadin-button> when in focus

Question

I'd like to create a customized Lumo theme in Vaadin 14.6, where the buttons (<vaadin-button>) show a double border (css: box-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--some-custom-background-color);) when focussed. While custom styles for other <vaadin-button> pseudo selectors, such as :hover, :active, etc. work well, I cannot find a way to customize the :focus appearance.

Answer 1

I found that it is actually Firefox which is not showing the :focus related css. Chrome and Safari display the style as desired.

For the sake of completeness, this is the related css, which goes into 'vaadin-button.css' in the 'themes/components' folder of the application:

:host([theme~="primary"]:focus) {
    height: calc(var(--my-button-size) - 6px);
    border-radius: 1px;
    background-color: var(--my-button-primary-background-color-focus);
    box-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--my-button-primary-background-color);
}