bug: On ion-toggle, toggle-inner does not adapt to height and width

Bug Report

Ionic version:

[x] 4.10

Current behavior:

We can change height and width of a ion-toggle but toggle-inner does not adapt the respective height and width

Here is the styling that I am using:

<ion-toggle #onOffToggle mode='ios'></ion-toggle>
ion-toggle {
		--background: var(--color-red);
		--background-checked: var(--color-green);
		height: 20px;
		width: 50px;
	}

Expected behavior:

Inner circle should adapt to the respective height

Also by some way can I make toogle look like this?

Steps to reproduce:

<ion-toggle #onOffToggle mode=‘ios’></ion-toggle>

Other information:

Ionic info:

Ionic:

   Ionic CLI                     : 5.4.2
   Ionic Framework               : @ionic/angular 4.10.0
   @angular-devkit/build-angular : 0.801.3
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.0.0

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 8.1.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 5 other plugins)

Utility:

   cordova-res : not installed
   native-run  : 0.2.9

System:

   Android SDK Tools : 26.1.1 (C:\Program Files\Android\android-sdk)
   NodeJS            : v12.13.0 (C:\Program Files\nodejs\node.exe)
   npm               : 6.12.0
   OS                : Windows 10

[rajiramamoorthi]

Any solution for the above issue

[C-racker]

+1