When the avatar component is used, and text is specified e.g. initials

<b-avatar rounded text="DF"></b-avatar>

the resulting element gets inline font-size css:

<span class="b-avatar-text" style="font-size: calc(1em);"><span>DF</span></span>

Questions:

1. Why the seemingly redundant second around the text itself, inside the .b-avatar-text?
2. Is there a way to completely disable the creation of the inline css? Is that method of implementation necessary as a design decision (on the part of the library)?

Not only do I wish to not have the inline-css (as principle), I am already styling the text with custom css.
On a page with many avatars, the overhead is undesirable.

In general, this seems like it would be better addressed by styles in the scss.

(For that matter, the inline css on the .b-avatar element is equally undesirable).

• inquiring.