Is possible to define a custom modifier for an <ons-bottom-tolbar>?

See more:

HTML

PhoneGap

web_application

Hi, I'm trying to define a custom "modifier" attribute for an

<ons-bottom-tolbar>

in order to modify it's default height value (44px).

As is defined on Onsen's web page (here), the "ons-bottom-tolbar" has that attribute, and as comments here, if you want to create an modifier named "xxxx" for an onsen element named "ons-yyyy", you have to define an css class as:

.yyyy--xxxx {
   /* define style here ...
    */
}

where the class name is the onsen element without "ons-" sufix, "--" and the modifier name.

I can to do this for an "ons-button":

<ons-button modifier="green">GREEN BUTTON</ons-button>

.button--green {
  background-color: green;
}   

... but for an "ons-bottom-toolbar" don't work:

<ons-bottom-toolbar modifier="pink">
  PINK FOOTER????
</ons-bottom-toolbar>

.bottom-toolbar--pink{
  height: 24px;
  background-color: pink;
  border-top: 5px solid black;
}

Take a look here (codepen.io)

¿Any idea?

Thanks...