mat-checkbox not changing mat-ripple-element width and height

I am using the standart mat-checkbox like this:

                    <mat-checkbox class="checkbox-download example-margin"
                              (change)="checkboxChange($event.checked, item.id)"
                              [checked]="item.checked"></mat-checkbox>

And i would like to change its default 40x40 px dimension of click/hover circle into 36x36 px. I have tried changing the css like this:

 .mat-checkbox-ripple, .mat-ripple-element{
    width: 36px !important;
    height: 36px !important;
    left: calc(50% - 18px) !important;;
    top: calc(50% - 18px) !important;;
  }

which leads to the dimension being changed:

This is expected size of mat-checkbox click/hover area

also the classes are fine while hover:

Classes

But when i click it with the mouse and while the mouse button is still clicked i get dynamically added during this time div with 40x40 pixels dimensions while i expect it to be with 36x36 px and just be darker but it looks like:

This ugly result

Any ideas how to change the dimensions of the checkbox click area? I can see here They add 20 px steady ripple radius but how to change it locally to 18px?