How to create an Android style "mini toast" using the cssClass option?


Hi, I have quite a few applications where I see them show a small toast where the width fits the text and it has rounded corners. It looks similar to this


I wanted to (optionally) do this using the cssClass property of the ToastOptions object.

I created similar css, eg

    .mini-toast {
	   background: transparent;
	   background-color: transparent;
		  background: transparent;
		  background-color: transparent;
			display: table;
			margin: 0 auto;
			border-color: black;
			border: 2px solid;
			border-radius: 25px;
			padding:3px 10p

     let toast = this.toastCtrl.create({
         message: 'test',
         cssClass: 'mini-toast',  <------------------------

but I am not getting the correct results as shown here running in browser using ionic serve

Looking at all the css, i can’t see where the black background (in the rectangle) is coming from

Does anyone know how to do this using cssClass option?

Thanks in advance