Change .btn-primary color in CSS

Hello - thanks in advance for your help!

Expected behavior I am changing the default btn-primary color, using a site.css file. All of the button attributes change except for focus-color. As a workaround, I have to add a second CSS entry '.btn-primary:focus' to have the focus color modified, but I want to avoid using the workaround.

Note: I test the focus color by tabbing to the button.

See code snippet below.

Resources (screenshots, code snippets etc.) /* override mdb primary button color / .btn-primary { --mdb-btn-bg: #383894 !important;
--mdb-btn-color: #fff!important; --mdb-btn-box-shadow: 0 4px 9px -4px #3b71ca!important; --mdb-btn-hover-bg: #2a2a6f!important; --mdb-btn-hover-color: #fff!important; --mdb-btn-focus-bg: #2a2a6f!important; / <---- DOES NOT WORK ----- / --mdb-btn-focus-color: #fff!important; --mdb-btn-active-bg: #2a2a6f!important; --mdb-btn-active-color: #fff!important; } / override focus color; for some reason the 'focus' override above does not work / .btn-primary:focus { background-color: #2a2a6f!important; / <---- THIS WORKS ----- */ }